How to open an html page from java script as a bootstrap modal? - twitter-bootstrap-3

I am developing a chrome extension and want to open an HTML page from content script as a bootstrap modal on the same page. How is it possible?


Your answer is a bit vague and you didn't provide any code which isn't the best to do.
But you can achieve this using iFrames
Your modal body would have somthing like <iframe src="https://www.w3schools.com"></iframe> in it.
All the information you'd need is on that site. But you'd possibly need to update some CSS to make it look good.


I created a full screen modal with scrollable iframe and when the modal active the body scroll capabilty has been disabale and when modal close scroll has been enable.I hope this will help. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="mybody">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal" onclick="disablebodyscroll()"> OOPEN A MODAL WITH IFRAME</button>
<div style="background-color: black; height: 800px;"></div>
<p>Copyright © 2017 Ace</p>
<!-- End of button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="enablebodyscroll()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="https://www.w3schools.com/" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" width="100%" height="100%" position="absolute" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal-body {
height: 500px;
min-height: 100%;
}
</style>
<script type="text/javascript">
function disablebodyscroll() {
document.getElementById("mybody").style.overflow = "hidden";
}
function enablebodyscroll() {
document.getElementById("mybody").style.overflow = "auto";
}
</script>

Related

How do I Make My Carousel and it's Content Visible?

I have coded a carousel (photo slide) that I had functioning before; however, I am revising my site and having trouble making it function again. The arrow controls that slide left and right are present; however, the photos are not. Before placing the carousel code the photos were visible, but they were not aligned correctly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="images/rb/tisha-prevented-from-leaking-live-behind-the-scenes-stories.jpg" alt="superstar" style="width:500px;height:500px;">
<div class="carousel-caption">
<h3 align="right">Tisha Vaculin</h3>
<p align="right">Prevented from leaking teasers behind the scenes in stories. Amongst a few targeted.</p>
</div>
</div>
<div class="item">
<img src="images/rb/gabrielle-steberis-prevented-from-leaking-behind-the-scenes-footage-of-new-series-diety.jpg" alt="superstar" style="width:500px;height:500px;">
<div class="carousel-caption">
<h3 align="right">Gabrielle Steberis</h3>
<p align="right">Prevented from leaking teasers to her Diety series in her stories</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<style>
/* Carousel */
.carousel-inner img {
/* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: green !important;
}
#media (max-width: 1200px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
/* End of Carousel */
</style>

sliding image in background while the text and button remains static

Please am trying to create a front page with a sliding image and the text and button on it remain in same position while images slide underneath the text and button..
solution i found online are not helpful

One way to do it is setting the content you want to remain static to fixed. Place all the content inside a wrapper so you dont need to manually position each element.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
}
.container img{
height: 100%;
width: 100%;
}
.fixed {
width: 100%;
position: fixed;
z-index: 999;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="fixed">
<p class="lead" style="color: white;">Hello! I'm text.</p>
<button class="btn">PRESS</button>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
</div>
</div>
</div>
</body>
</html>

Scrollspy is making the wrong link active on page load

For some odd reason scrollspy is causing my second list item to be active on page load instead of the first one. It's weird because after I scroll a bit with the mouse it will make the correct list item active. Aside from this error it functions perfectly. If someone could help me out it would be greatly appreciated.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="111">
<header id="home">
<nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
Determined Divas
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home" class="active">Home</li>
<li>About</li>
<li>Who We Are</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<!-- Home page row -->
<div class="row" id="home">
<div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
</div>
<!-- About Section -->
<section class="row" id="about">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Who We Are Section -->
<section class="row" id="whoWeAre">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Who We Are</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Gallery -->
<section class="row" id="gallery">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Gallery</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Contact-->
<section class="row" id="contact">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>
</body>
</html>
Heres the CSS:
body{
position: relative;
background-color: #FFF2E2;
color: white;
font-family: 'Raleway', sans-serif;
/*Keeps page content under the header, must match navbar height*/
/*padding-top: 75px; */
}
/*NAV STYLING*/
.navbar-default{
height: 76px;
transition: all 0.5s;
-webkit-animation: all 0.5s;
}
.navbar-default .navbar-nav{
font-weight: bold;
}
.navbar-default .navbar-brand {
color: white;
font-size: 2.0em;
font-family: 'Poiret One', cursive;
font-weight: bolder;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #777;
}
.navbar-default {
background-color: #E498AF;
}
/*Controls active nav items*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #777;
}
/*Animate nav on scroll*/
.cbp-af-header-shrink{
height: 51px;
}
/*Full screen image styles*/
.fill{
background-size: cover;
background-position: center;
}
/*Title Row Styling*/
.title-row{
height: 100px;
color: #777;
background-color: #FFF2E2;
text-align: center;
}
/*Content row styling*/
.content-row{
height: 600px;
background-color: white;
}

that is because you have
<body data-spy="scroll" data-target=".navbar" data-offset="111">
data target of navbar class but you html markup has
<div id="navbar" class="collapse navbar-collapse">
id navbar; switch either one and should work.
bootstrap scrollspy will look for a target then default to a nav if it cant find the target or if a target is not specified. Its also better to put the scrollspy on a div that only contains the navigation
here is a fiddle example

Jssor slider not responsive

My slider is not responsive. It does not get re-sized when I re-scale my browser. I want the slider to bo responsive even if I use in tablet or mobile.
The slider code is below the navigation.
<!DOCTYPE html"">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Vijay Hemant Finance & Estates Limited</title>
<link rel="shortcut icon" href="" />
<link rel='stylesheet' id='page-css' href='css/bootstrap-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='page-css' href='css/settings.css' type='text/css' media='all' />
<style type="text/css">.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}</style>
</style>
<link rel='stylesheet' id='page-css' href='css/shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css-css' href='css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css-css' href='css/bootstrap-responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='main_style-css' href='css/style.css' type='text/css' media='all' />
<!--
<link rel='stylesheet' id='Merriweather-css' href='http://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C300&ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='google_fonts-css' href='http://fonts.googleapis.com/css?family&ver=3.5.1' type='text/css' media='all' /> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.core.js"></script>
<script type="text/javascript" src="js/jssor.utils.js"></script>
<script type="text/javascript" src="js/jssor.slider.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url(''); background-repeat: repeat; background-position: top left; background-attachment: fixed; }
</style>
<link rel='stylesheet' id='page-css' href='css/page.css' type='text/css' media='all' />
<link rel='stylesheet' id='slider-css' href='css/slider.css' type='text/css' media='all' />
</head>
<body class="home blog custom-background">
<div id="container">
<div class="container-narrow">
<!-- Header -->
<header>
<div class="top">
<div class="container">
<div class="row-fluid">
<div class="span12">
<!-- Logo -->
<div class="logo" style="margin-top:20px;margin-bottom:20px;margin-left:0px;">
<img src="img/logo4.png" alt='Vijay Hemant Finance & Estates Limited' title="Vijay Hemant Finance & Estates Limited"/>
</div>
<!-- Site description -->
<h2 class="site_heading">Handling Money........ With Devotion And Care</h2>
<!-- Contact -->
<div class="header_contact rounded">
<div class="phone"><img src="img/phoneicon.png" alt="phone icon" /><span>044-30228855 </span></div>
<div class="email"><img src="img/mailicon.png" alt="mail icon" /><span>office#vijayhemant.in</span></div>
</div>
</div>
</div>
</div>
</div>
<div> <img src="img/separator.png" style="margin-top: -60px; width:755px;
margin-left: 390px; "></div>
<!-- Menu Navigation -->
<div class="menu_wrap" style="position:relative; top:-60px;">
<div class="container">
<div class="navbar navbar-inverse navbar-relative-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
</a>
<div class="nav-collapse collapse navbar-responsive-collapse" style="height:auto;">
<ul id="menu-menu" class="nav">
<li id="menu-item-284" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-284"><a title="Home" href="index.html">Home</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9 dropdown-submenu"><a title="Blog" href="commercial-vehicles.html" data-toggle="dropdown" data-target="#" class="dropdown-toggle">Business<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Commercial Vehicles" href="commercial-vehicles.html">Commercial Vehicles</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Car / LMV" href="car-finance.html">Car Finance</a></li>
</ul>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="About Us" href="about-us.html">About Us</a></li>
</li>
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a title="CSR" href="csr.html">CSR</a></li>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Investment" href="investment.html">Investment</a></li>
<!-- <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85 dropdown-submenu"><a title="Shortcodes" href="" data-toggle="dropdown" data-target="#" class="dropdown-toggle">services<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Blog Fullwidth" href="">Fixed Deposits</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Blog Sidebar Left" href="">Recurring Deposits</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-149"><a title="Standard" href="">Annual Reports</a></li>
</ul>
</li> -->
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Contact Us" href="contact-us.html">Contact Us</a></li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Downloads" href="download.html">Downloads</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section style="margin-top:-75px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider2_container" style="position: relative; width: 600px;
height: 350px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div class="sliderrs" u="slides" style="cursor: move; position: absolute; left: 150px; top: 0px; width: 1000px; height: 372px;
overflow: hidden;">
<div>
<a u=image href="#"><img src="img/slider1.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="img/slider2.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="img/slider3.jpg" /></a>
</div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="position: absolute; bottom: 30px; left: 620px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
<!-- Arrow Navigator Skin Begin -->
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">slideshow</a>
</div>
<!-- Jssor Slider End -->
</section>
<!-- SLIDER ends -->
<!-- CONTENT STARTS -->
<section style="margin-top: 10px;">
<div class="container">
<!--part-1-->
<div class="row-fluid part_home">
<!-- SERVICES LEFT -->
<section>
<div class="span4 ca-menu left">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item270:hover {background-color: #FFFFFF}
.ca-menu.left .ca-item:hover a.more_link span, .ca-menu.left .ca-item:hover h1, .ca-menu.left .ca-item:hover p{color: #515151 !important;}
.ca-menu .ca-item270 {background-color: #D25555}
.ca-item270 .ca-main {color: #FFFFFF;}
.ca-item270 .ca-sub {color: #FFFFFF}
.ca-item270 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item270 rounded">
<div class="ca-content">
<a href="investment.html">
<h2 class="ca-main">Secure Future</h2>
<p> </p>
<p align="justify" class="ca-sub">Become an entrepreneur and grow with the booming and extremely lucrative logistic sector. We are serving this segment since 1985 and have turned many dreams into reality.</p>
</a>
</div>
</div>
</div>
</div>
<!-- SERVICES CENTER -->
<div class="span4 ca-menu center">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item277:hover {background-color: #FFFFFF}
.ca-menu.center .ca-item:hover a.more_link span, .ca-menu.center .ca-item:hover h1, .ca-menu.center .ca-item:hover p{color: #515151 !important;}
.ca-menu .ca-item277 {background-color: #515151}
.ca-item277 .ca-main {color: #FFFFFF;}
.ca-item277 .ca-sub {color: #FFFFFF}
.ca-item277 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item277 rounded">
<div class="ca-content">
<a href="about-us.html">
<h2 class="ca-main">Strong Values</h2>
<p> </p>
<p align="justify" class="ca-sub">We value people, culture, tradition, and respect honesty, truth, integrity and experience.</p>
</a>
</div>
</div>
</div>
</div><!-- span4 -->
<!-- SERVICES RIGHT -->
<div class="span4 ca-menu right">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item279:hover {background-color: #FFFFFF}
.ca-menu.right .ca-item:hover a.more_link span, .ca-menu.right .ca-item:hover h1, .ca-menu.right .ca-item:hover p{color: #103042 !important;}
.ca-menu .ca-item279 {background-color: #236890}
.ca-item279 .ca-main {color: #FFFFFF;}
.ca-item279 .ca-sub {color: #FFFFFF}
.ca-item279 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item279 rounded">
<a href="commercial-vehicles.html">
<div class="ca-content">
<a href="commercial-vehicles.html">
<h2 class="ca-main"> Dedicated Services </h2>
<p> </p>
<p align="justify" class="ca-sub"> We have a bunch of loyal associates who have grown with the company and will partner you in all your needs.</p>
</a>
</a>
</div>
</div>
</div>
</div><!-- span4 -->
<div style="clear:both;"> </div>
<!-- NEWS RIGHT -->
</div>
<!--part-1-->
<!--part-2-->
<!--part-2-->
<!--part-3-->
</div><!-- .container -->
<!--part-3-->
</section>
<div style="clear:both;"> </div><div style="clear:both;"> </div>
<section class="homecon">
<div class="container">
<div class="row-fluid">
<ul>
<p align="justify">
<li>
<div align="justify"> Vijay Hemant Finance & Estates limited incorporated in the year 1985, listed on the Madras stock exchange serves the small and medium transport sector segment in Tamilnadu.</div>
<li>
<div align="justify"> We provide loans from 1 year to 3 years upto 70% value of the vehicle and upto 10 year old vehicle.
</div>
<li>
<div align="justify"> We have branches in Ramnad, Madurai, Coimbatore, Trichy & our head office is in Chennai.
</div>
<li>
<div align="justify"> A useful life of a vehicle is 15 years and we fund this segment.
</div>
<li>
<div align="justify"> We pride ourselves in last mile connectivity with the transport sector throughout Tamilnadu with our loyal staff, committed service and rare dedication.
</div>
<li>
<div align="justify">Attractive terms for the deposits and service through our Chennai office with monthly, quarterly and annual interest options.
</p>
</div>
</ul>
</div>
</div>
<br><br><br><br>
</section>
<!-- Div for styling purpose only -->
<div class="blank_separator"></div>
<!--prefooter-->
<section>
<div class="row-fluid">
<img src="img/shadow-divider.png" class="shadow_divider">
</div>
<div class="container">
<div class="row-fluid twitter_wrap">
<div class="span9" style="">
<p> Vijay Hemant Finance & Estates Limited, A trusted financial service group in India.</a></p></div>
<style type="text/css">
.social:hover {opacity: 0.5; filter: alpha(opacity=30);}
</style>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row-fluid">
<!-- Footer Widget 1 -->
<div class="span4">
<div class="textwidget"><p><img src="img/logo5.png"></p></br>
<p>A trusted financial service group in India. The activities of the group span savings products like Deposits, Car and Commercial Vehicle Finance...</p>
</div>
</li>
</div>
<style type="text/css">
.quicklinks{ }
</style>
<!-- Footer Widget 2 -->
<div class="span4">
<h3 class="widget_title">Useful Links</h3>
<ul id="quicklinks">
<li class="quicklinks">Branches</li>
<li class="quicklinks">Deposit Rates</li>
<li class="quicklinks">Deposit Form</li>
<li class="quicklinks"> Interest Rate Model</li>
<li class="quicklinks"> Invester Relations</li>
<li class="quicklinks">Fair Practice Code</li></ul></li>
</div>
<!-- Footer Widget 3 -->
<div class="span4">
<h3 class="widget_title">Head Office (Chennai)</h3>
<p>
No:110,5th floor,Prakash Presidium,<br />
Mahatma Gandhi Road,<br />
Nungabakkam,Chennai-600 034
Phone:044-3022885</p>
</div>
</div>
<!-- footer 4-->
<br>
<div id="foot">
<img src="img/separator.png" alt="separator" />
<div class="span8"><p>Copyright 2014©All Rights Reserved by Vijay Hemant Finance & Estates Limited.</p></div>
</div>
</div><!-- /container -->
</footer>
</div><!-- container-fluid ends -->
</body>
</html>

You can use the API instance.$ScaleWidth(width) to scale your slider.
The following is typical responsive code,
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
Reference: http://www.jssor.com/development/tip-make-responsive-slider.html

Dojo tabContainer.selectChild not working in IE

I have something like this on my HTML page.
<html>
<body>
<div dojoType="dijit.layout.TabContainer" id="allTabContainer" style="width: 1150px; height: 490px" tabPosition="left-h" persist="true">
<div dojoType="dijit.layout.ContentPane" id="firstTab_id" title="firstTab" >Content 1</div>
<div dojoType="dijit.layout.ContentPane" id="secondTab_id" title="secondTab" >Content 2</div>
<div dojoType="dijit.layout.ContentPane" id="thirdTab_id" title="thirdTab" ><jsp:include flush="true" page="thirdTab_page.jsp"></jsp:include></div>
</div>
</body>
</html>
I have 3 buttons on the thirdTab_page.jsp which on clicking would call the below selectTab javascript function. Please check the code for the same.
<html>
<body>
<div dojoType="dijit.layout.BorderContainer" style="padding:10px; width: 50%;" id="borderCont">
<button dojoType="dijit.form.Button" type="submit" id="firstTab" onclick="selectTab(this.id);">Tab1</button>
<button dojoType="dijit.form.Button" type="submit" id="secondTab" onclick="selectTab(this.id);">Tab2</button>
<button dojoType="dijit.form.Button" type="submit" id="thirdTab" onclick="selectTab(this.id);">Tab3</button>
</div>
</body>
</html>
And then I have the javascript function which goes on like this.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
function selectTab(tabId){
var correctTabId = tabId+"_id";
dijit.byId("allTabContainer").selectChild(correctTabId);
}
</script>
The tabContainer.selectChild doesn't seem to work in IE, but works perfect in Firefox. Please suggest if I have missed out something.
Thanks in advance.