We Keep Coding

how to make html elements respond to their parent viewport rather than browser viewport?

I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>

Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>

How Do I make a <div> slide into view when a button is clicked?

I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.
I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.
My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.
#title {
width: 100%;
background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
position: relative;
display: inline-block;
}
#characters {
width: 100%;
display: inline-block;
}
<div id="maincontainer">
<header id="title">
<h1>Arthur and Merlin</h1>
<h3>Battle For Camelot</h3>
<div id="titlebutton">Join The Battle
</div>
<input id="checkboxforplaces" type="checkbox">
<label id="toplaces" for="checkboxforplaces">
<img src="Icons/castle.png">
</label>
<input id="checkboxforchar" type="checkbox">
<label id="tocharacters" for="checkboxforchar">
<img src="Icons/helmet.png">
</label>
</header>
<section id="characters">
<div id="firstrow">
<article id="arthurbox">
<a id="arthur" href="#">
<img src="Images/Arthur/Arthur%201.jpg" </a>
</article>
<article id="merlinbox">
<a id="merlin" href="#">
<img src="Images/Merlin/merlin%202.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="secondrow">
<article id="morganabox">
<a id="morgana" href="#">
<img src="Images/Morgana/Morgana1.jpg">
</a>
</article>
<article id="youngmordredbox">
<a id="youngmordred" href="#">
<img src="Images/YoungMordred/Mordred2.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="thirdrow">
<article id="utherbox">
<a id="uther" href="#">
<img src="Images/Uther/Uther.jpg">
</a>
</article>
<article id="gaiusbox">
<a id="gaius" href="#">
<img src="Images/Gaius/Gaius-15hdg5a.jpg">
</a>
</article>
<div id="clear"></div>
</div>
</section>
</div>

I think this jsfiddle may be useful for you.
$(document).ready(function(){
$('#hide').click(function(){
var hidden = $('.hidden');
hidden.hide('slide', {direction: 'left'}, 400);
});
$('#show').click(function(){
var hidden = $('.hidden');
hidden.show('slide', {direction: 'left'}, 400);
});
});
https://jsfiddle.net/ZQTFq/3372/
Modify the code depending on your needs.

Navbar collapse is not working in Bootstrap 3.2

On phone view The Navbar works just File in Bootply but it is not expanding in my site.
Here is the full page Code-
<html lang="en"><head>
<title>Your store</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="nopCommerce">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link href="/themes/ProcoDefault/Content/jquery.datetimepicker.css" rel="stylesheet" type="text/css">
<link href="/themes/ProcoDefault/Content/bootstrap-3.2.0/CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js"></script>
<script src="/Scripts/public.common.js"></script>
<script src="/Scripts/public.ajaxcart.js"></script>
<script src="/Scripts/jquery.datetimepicker.js"></script>
<link rel="shortcut icon" href="http://localhost:38451/favicon.ico">
<!--Powered by nopCommerce - http://www.nopCommerce.com-->
<!--Copyright (c) 2008-2013-->
<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_reset .fb_dialog_legacy{overflow:visible}.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.fb_dialog_content{background:#fff;color:#333}.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}.fb_dialog_top_left,.fb_dialog_top_right,.fb_dialog_bottom_left,.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}.fb_dialog_vert_left,.fb_dialog_vert_right,.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}.fb_dialog_vert_left,.fb_dialog_vert_right{width:10px;height:100%}.fb_dialog_vert_left{margin-left:-10px}.fb_dialog_vert_right{right:0;margin-right:-10px}.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{width:100%;height:10px}.fb_dialog_horiz_top{margin-top:-10px}.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{-webkit-transform:none;height:100%;margin:0;overflow:visible;position:absolute;top:-10000px;left:0;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6), color-stop(.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset, rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_lift{z-index:1}.fb_hide_iframes iframe{position:relative;left:-10000px}.fb_iframe_widget_loader{position:relative;display:inline-block}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fbpluginrecommendationsbarleft,.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}.fbpluginrecommendationsbarleft{left:10px}.fbpluginrecommendationsbarright{right:10px}</style></head>
<body>
<div id="dialog-notifications-success" title="Notification" style="display:none; width:600px;">
</div>
<div id="dialog-notifications-error" title="Error" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
<img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close">
</div>
<div class="headerwrapper">
<div class="header ">
<div class="container top-header-container shadowwrapper">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="header-logo">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<link href="/themes/ProcoDefault/Content/flyout/flyout.css" rel="stylesheet" type="text/css">
<script src="/themes/ProcoDefault/Content/flyout/flyout.js" type="text/javascript"></script>
<div class="social_container_login">
<div class="social_container">
<div><a target="_blank" href="http://www.facebook.com/pages/Brookhaven-Marketplace/33148540039"><img src="/Content/Images/uploaded/social/big_facebook_icon.png" alt="Facebook"></a></div>
<div><a target="_blank" href="https://twitter.com/#!/brookhavenmkt"><img src="/Content/Images/uploaded/social/Twitter.png" alt="Twitter"></a></div>
<div><a target="_blank" href="http://pinterest.com/brookhavenmkrt/"><img src="/Content/Images/uploaded/social/icon_pinterest.png" alt="Pinterest"></a></div>
</div>
<div class="login">
My Account
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a class="see-u-picks" href="../../../specialcouponoffer"><img class="img-responsive" src="/content/images/uploaded/See-current-upick-offer-btn.png"></a>
</div>
<div id="login-box" class="login-popup">
<img src="/Content/Images/uploaded/close_pop.png" class="btn_close" title="Close Window" alt="Close">
<div class="header-links">
<h1>My Account</h1>
<ul>
<li>Shopping List</li>
<li>Preferences</li>
<li>Log out</li>
<li id="topcartlink">Shopping cart
(16)
</li>
<script type="text/javascript">
$('#topcartlink').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#topcartlink').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
$('#flyout-cart').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#flyout-cart').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
</script>
<li>Wishlist <a href="/wishlist" class="wishlist-qty">
(1)</a> </li>
</ul>
</div>
<div class="topdownclickme">
<div class="ico-myaccount">My Account</div></div>
<script>$('.topdownclickme').click(function() {
$('.header-links').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
</div>
</div>
</div>
<div class="header-selectors-wrapper">
<div class="header-taxdisplaytypeselector">
</div>
<div class="header-currencyselector">
</div>
<div class="header-languageselector">
</div>
</div>
</div>
<div class="top-header-menu">
<link media="print" rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/print.css">
<link rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/nav/superfish.css" media="screen">
<script type="text/javascript" src="/Scripts/hoverIntent.js"></script>
<script type="text/javascript" src="/Scripts/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<div class="container shadowwrapper ">
<div class="row">
<div class="col-lg-12 col-md-12 ">
<div class="headermenu">
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#top-header-menu-proco" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-header-menu-proco" class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/books">Books
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Computers
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">Desktops
</a>
</li>
<li>
<a href="/notebooks">Notebooks
</a>
</li>
<li>
<a href="/accessories">Accessories
</a>
</li>
<li>
<a href="/software-games">Software & Games
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Electronics
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">Camera, photo
</a>
</li>
<li>
<a href="/cell-phones">Cell phones
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel-shoes">Apparel & Shoes
</a>
</li>
<li>
<a href="/digital-downloads">Digital downloads
</a>
</li>
<li>
<a href="/jewelry">Jewelry
</a>
</li>
<li>
<a href="/gift-cards">Gift Cards
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div>
</div>
</div>
</div>
</div>
<div class="background-wrapper">
<div class="#*master-wrapper-page*#">
<div class="#*master-wrapper-content*#">
<script type="text/javascript">
//<![CDATA[
//replace the first parameter with "true" to use popup notifications
AjaxCart.init(true, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
//]]>
</script>
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="white-background container shadowwrapper">
<div class="">
<div class="row">
<div class="col-md-3 ">
<div class="htmlcontent">
<div class="htmlcontent-body">
<div class="left-nav">
<ul>
<li><img src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" alt="" width="280" height="184"></li>
<li><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomePageLeft/winegeek.jpg" alt="" width="265" height="185"></li>
<!-- <li><img width="280" height="184" src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" /></li> -->
<li><img src="/Content/Images/uploaded/HomePageLeft/lifetime_fitness_button.jpg" alt="" width="232" height="185"></li>
<!--<li><img src="/Content/Images/uploaded/HomePageLeft/catering_promo.jpg" height="184" width="338" /></li>--></ul>
</div>
</div>
</div>
<div class="clear">test
</div>
</div>
<div class="col-md-9 ">
<div class="">
<link rel="stylesheet" href="/themes/ProcoDefault/Content/flexslider/flexslider.css" type="text/css">
<script src="/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
slideshowSpeed: 5000
});
});
</script>
<div class="homepage_container">
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://s-static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="homepagebanners"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="flexslider">
<ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.347983469537255;"><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/Easter-Menu-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-1.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-2.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://www.brookhavenmarket.com/Content/Images/uploaded/HomeBanners/2013_catering_banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/gluten-free-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.652016530462745;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/help_wanted.jpg" alt="" width="634" height="216"></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li><li><a class="">5</a></li><li><a class="">6</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
</div>
</div>
</div>
<div class="homepagebottom"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="homepageBlogContainer">
<p class="homepageBlogText"><span style="font-size: medium;"><strong><em>Easter Traditions with a Twist</em></strong></span></p>
<p>Easter is always a busy time at a food store ranking up there with the likes of Christmas and Thanksgiving as traditionally it’s a time when families gather together to share a meal. Not just any meal but what most would consider a feast. It’s a time when traditional foods that we have loved since childhood are planned, shopped for and prepared with great care and attention to detail. It’s a time when on most cases paper plates and plastic flatware are foregone in deference to Mom’s best china, crystal and silverware. Last week’s blog focused on our sweet tooth with suggested Easter Desserts. This week let’s concentrate on the main course....</p>
<p><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US">Okay, perhaps not. But we can still hope, can’t we?</span></span></span></p>
<p><span style="color: #800000;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US"> ...</span></span></span><a style="font-size: small; font-family: Arial, sans-serif;" href="http://www.brookhavenmarket.com/blog"><span style="color: #800000;">read more</span></a></strong></span></p>
<div class="readmore"><img src="/Content/Images/uploaded/arrow.png" alt="" align="right"></div>
</div>
<div style="float: left;"><iframe style="width: 338px; height: 346px; overflow: hidden;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBrookhaven-Marketplace%2F33148540039&width=340&colorscheme=light&show_faces=false&stream=true&header=true&height=346" width="320" height="240" frameborder="0" scrolling="no"></iframe></div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container shadowwrapper">
<div class="row">
<div class="col-md-12">
<div class="footer ">
<div class="clear" style="height:1px"></div>
<img class="proco-logo" src="../themes/ProcoDefault/Content/images/proco_logo.png">
</div>
</div>
</div>
</div>
</div>
<div class="footer-disclaimer">
Copyright © 2014 Brookhaven Market. All rights reserved.
</div>
<div class="footer-storetheme">
</div>
</body></html>
I am using jquery-1.10.2.min.js. What could be the problem? There is showing no problem in console too. I already used navbar in many sites but never saw that kind of problem before. Please Help.

Bootstrap relies on jQuery but in your code you have presented the files for Bootstrap first. Change the order and it will work. Additionally you need to ensure your paths are correct as you seem to be missing the name of the theme.
As you mention in the comments, your code to include the scripts is:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Themes/Content/bootstrap-3.2.0/js/bootstrap.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Simply change the order of the last 2 lines like this:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Html.AppendScriptParts("~/Themes/ProcoDefault/Content/bootstrap-3.2.0/js/bootstrap.min.js");

Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then

Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then.
So, how can I make the height not stretch and look decent?
I'm using: Bootstrap 3.1.1, jQuery 1.11, and FlexSlider (the images in question are in a FlexSlider Carousel)
My web page is at:
http://www.amleo.com/
My HTML is:
<section class="slider">
<div class="container White_BG">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
<!--Slider Start-->
<div class="flexslider" id="mainslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1200%; margin-left: -1514px;">
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
<li style="width: 757px; float: left; display: block;" class="flex-active-slide">
<a href="http://www.amleo.com/polysample/a/29_31/" target="_blank" title="OW Poly Sample">
<img src="http://cdnll.amleo.com/images/art/1433_ow-plus-web.jpg" width="770" height="322" title="OW Poly Sample" alt="OW Poly Sample">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/quickorder.aspx" title="Quick Order Form">
<img src="http://cdnll.amleo.com/images/art/1441-quick-order-content-web.jpg" width="770" height="322" title="Quick Order Form" alt="Quick Order Form">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="">1</a></li>
<li><a class="flex-active">2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ol>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#">Previous</a></li>
<li><a class="flex-next" href="#">Next</a></li>
</ul>
</div>
<!--Slider End-->
</div>
<!--Side Banner-->
<div class="col-md-3 hidden-md hidden-sm hidden-xs visible-lg" style="border:4px;padding-left:0px!important;">
<a href="http://www.amleo.com/careers/a/66/" title="AM Leonard Careers">
<img src="http://cdnll.amleo.com/images/art/Career_ad_2014.jpg" width="379" height="321" alt="AM Leonard Careers">
</a>
</div>
<!--End Side Banner-->
</div>
</section>

In flexslider.css it reads:
.flexslider .slides img { ... }
It looks like you need to add height: auto; and then use javascript to remove the height attribute that the slider is applying to the images.
Something along the lines of:
jQuery('.slides img').attr('height', '');

Use
.flexslider .slides img{ width:auto;}
If you do not want to stretch an image.

Loading a tab on button click

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)

I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});