Random white space beneath my website caused by image and video - javascript

In between my main body elements and my footer, there is a bunch of random white space in my website. I've figured out that by removing my cat image and videoplayer, the space goes away. But, of course, I don't want to have to do that, so I was wondering what's creating the white space. The only way I've been able to get rid of it is by REMOVING the video and image. Taking away certain css or all of the css doesn't work.
Sorry in advance for posting all of my code, but the problem is only visible when all of my code is there. Posting text or anything else as a replacement for my code doesn't show the problem. Thats why there's so much code there.
function length() {
var video = document.getElementById("sample");
len = video.duration;
document.getElementById("vidlen").innerHTML = len.toFixed(1);
}
.videoplayer {
position: relative;
right: -400px;
bottom: 290px;
width: 35%;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 2.5rem;
}
#pgselect {
position: absolute;
width: 133.859375px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#catbanner {
position: relative;
left: 470px;
bottom: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script type="text/javascript" src="functions.js"></script>
<title>My Webpage</title>
</head>
<body style="background-color:#EBEDF3;">
<div class="videoplayer">
<div class="videoheader">
<div class="card card-body">
<div style="clear: both;" class="card-header">
<div style="font-family:'Faster One'; float:left;">Earth Spinning Video</div>
<div id="vidlen" style="font-family:'Faster One'; float:right;"></div>
</div>
<video id="sample" onloadedmetadata="length()" controls enablejavascript="true">
<source src="sample.mp4">
</video>
</div>
</div>
</div>
<div id="catbanner" class="card card-body">
<img src="catbanner.jpg" alt="Four Cats">
</div>
<footer id="footer">
<div id="pgselect" class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"></audio>
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>
NOTE: The cat image and video aren't the actual image and video because they're not in a directory, but when they're full size the white space is more noticable.

Now that there is less code to debug, it is easier to see where the problem is :)
You are setting the bottom property for the elements, which is adding that space to the bottom of the container. If you remove this value from the divs, it fixes the problem.
Note: You could still have problems due to setting the right or left on Bootstrap cards. It would be better to just use the Bootstrap classes, without trying to "pull" some elements out of it's layout by specifying their positions.
Mixing custom positioning with Bootstrap like this is going to cause problems. Bootstrap is a complete framework that creates the layout for you - if you make changes to some elements, it is going to have an effect on the overall layout of the page.
Working Example:
(I replaced your video and image in the example below so you can see what is happening).
function length() {
var video = document.getElementById("sample");
len = video.duration;
document.getElementById("vidlen").innerHTML = len.toFixed(1);
}
.videoplayer {
position: relative;
right: -400px;
/* bottom: 290px;*/
width: 35%;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 2.5rem;
}
#pgselect {
position: absolute;
width: 133.859375px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#catbanner {
position: relative;
left: 470px;
/* bottom: 260px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script type="text/javascript" src="functions.js"></script>
<title>My Webpage</title>
</head>
<body style="background-color:#EBEDF3;">
<div class="videoplayer">
<div class="videoheader">
<div class="card card-body">
<div style="clear: both;" class="card-header">
<div style="font-family:'Faster One'; float:left;">Earth Spinning Video</div>
<div id="vidlen" style="font-family:'Faster One'; float:right;"></div>
</div>
<img src="http://placekitten.com/g/200/200">
</div>
</div>
</div>
<div id="catbanner" class="card card-body">
<img src="http://placekitten.com/g/200/400" alt="Four Cats">
</div>
<footer id="footer">
<div id="pgselect" class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"></audio>
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>

Related

How to run function on expand and on close dropdown bootstrap

the following code generates a bootstrap navbar with a notification icon and I want to execute a function when I click the notification button to expand the dropdown and when I close the dropdown how do I do this in javascript?
I have try'd selecting the dropdown and modifying the click function but that executes when you click a element in the dropdown not when you click the button.
#ex4 {
color: white;
width: auto;
}
#ex4 .p1.has-badge:after {
position: absolute;
right: 10%;
top: 8%;
content: attr(data-count);
font-size: 40%;
padding: .2em;
border-radius: 50%;
line-height: 1em;
color: white;
background: rgba(255, 0, 0, .85);
text-align: center;
min-width: 1.5em;
}
form.logout {
padding-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Feed</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Feed</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<form a name="logout" class="logout" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</div>
</div>
</nav>
</body>
</script>
</html>
Hook into the Dropdown events
var myDropdown = document.getElementById('myDropdown')
//expand/open
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something when opened...
})
//hide/close
myDropdown.addEventListener('hide.bs.dropdown', function () {
// do something when closed...
})
Codeply

bootstrap dropdown doesn't show dropdowns on click

I've been learning bootstrap and I have a very basic page I'm working on to learn hands on with. I tried adding in a dropdown and it doesn't dropdown at all when it is clicked, I checked to forum and the main thing was people not having the bootstrap js link, so I made sure I included that, and I'm pretty sure that I have all the proper links for it to work. (code is being weird in snippet, works normally on everything else) Thanks for the help, my code is:
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
First you'r calling two bootstrap version one in the head and one on the footer , second you need to call popper.js before bootstrap.js
see snippet
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I think you sould try using another CDN files, this worked for me
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>
This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

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");

How to extract content inside the javascript while scraping through a webpage using BeautifulSoup

I want to extract CustomerRatings out of this which is in "img class=BVImgOrSprite" using BeautifulSoup but not able to get it.
I read somewhere that BS only parse HTML content not the JS part. How should i proceed with it.
For traversing quickly look for ModuleId 372309 which i want to scrape. Thanks!!
<!DOCTYPE html>
<html lang="en-US" "="">
<head></head>
<body id="WalmartBodyId" class="WalmartMainBody DynamicMode wmItemPage" onload="handleLocationHash();" style="">
<iframe style="visibility:hidden;width:1px;height:1px;position:absolute;left:-999px;top:-999px;" src="http://walmart.ugc.bazaarvoice.com/1336/crossdomain.htm?format=embedded#origin=http%3A%2F%2Fwww.walmart.com"></iframe>
<script type="text/javascript"></script>
<script type="text/javascript" language="JavaScript"></script>
<div class="PageContainer">
<img class="WalmartLogo scrHid" width="145" height="62" border="0" style="float:none;margin-bottom:1px" src="http://i2.walmartimages.com/i/catalog/modules/G0040/wmlogo.gif"></img>
<div class="prtHid"></div>
<!--
end header
-->
<div class="MidContainer">
<div class="ItemPage clearfix" role="main">
<!--
ModuleId 372264
FileName #itemPageSingleRowContai…
-->
<!--
Start multiRowsContainer
-->
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix" itemtype="http://schema.org/Product" itemscope="">
<!--
ModuleId 372268
FileName #mainInfoTwoColsContaine…
-->
<!--
Start: mainInfoTwoColsContainer
-->
<script type="text/javascript"></script>
<div class="columnOne"></div>
<div class="columnTwo">
<!--
Main Additional Information
-->
<!--
Start mainInfoTwoColsContainer
-->
<!--
This DIV is used as the parent container of fly-o…
-->
<div id="Zoomer-big"></div>
<div>
<!--
ModuleId 372278
FileName #multiContainers
-->
<!--
Start multiRowsContainer MP
-->
<div class="multiRow">
<!--
ModuleId 372279
FileName #swMultiRowsContainer
-->
<form onsubmit="return ItemPage.validateSubmit(this, true);" action="/catalog/select_product.do" method="GET" name="SelectProductForm">
<input type="hidden" value="34083867" name="product_id"></input>
<input type="hidden" value="0" name="seller_id"></input>
<!--
Start multiRowsContainer MP
-->
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix">
<!--
ModuleId 372283
FileName #swSingleRowContainer1
-->
<!--
Start singleRowsContainer MP
-->
<style type="text/css"></style>
<!--
ModuleId 372309
FileName #CustomerRatingsLeftTop
-->
<script type="text/javascript"></script>
<div class="CustomerRatings">
<div id="BVCustomerRatings" class="BVBrowserFF">
<div class="BVRRRootElement">
<div class="BVRRRatingSummary BVRRPrimaryRatingSummary">
<div class="BVRRRatingSummaryStyle2">
<div class="BVRRRatingSummaryHeader"></div>
<div class="BVRROverallRatingContainer">
<div class="BVRRRatingContainerStar">
<div class="BVRRRatingEntry BVRROdd">
<div id="BVRRRatingOverall_" class="BVRRRating BVRRRatingNormal BVRRRatingOverall">
<div class="BVRRLabel BVRRRatingNormalLabel"></div>
<div class="BVRRRatingNormalImage">
<img class="BVImgOrSprite" width="75" height="15" title="3.4 out of 5" alt="3.4 out of 5" src="http://walmart.ugc.bazaarvoice.com/1336/3_4/5/rating.png"></img>
</div>
<div class="BVRRRatingNormalOutOf"></div>
</div>
</div>
</div>
</div>
<div id="BVRRRatingsHistogramButton_pyl3wq4v0hkzvqlgmib3ufvcl_ID" class="BVRRRatingsHistogramButton"></div>
<span class="BVRRCustomRatingSummaryCountContainer"></span>
<div class="BVRRSecondaryRatingsContainer"></div>
<div class="BVRRBuyAgainContainer"></div>
<div class="BVRRSecondaryRatingsContainer"></div>
<div class="BVRRRatingSummaryLinks"></div>
</div>
</div>
<a id="BVSubmissionLink" href="javascript://" data-bvjsref="http://walmart.ugc.bazaarvoice.com/1336/34083867/writereview…url=http%3A%2F%2Fwww.walmart.com%2Fcservice%2FwriteReview.do" data-bvcfg="574213729" style="display: none;"></a>
</div>
</div>
</div>
<!--
End: Customer Ratings Left Top
-->
<!--
ModuleId 372312
FileName #mpProductDetailsSummary…
-->
<div class="prtHid"></div>
<!--
ModuleId 372313
FileName #mpSecondaryButtons3
-->
<div class="prtHid"></div>
<!--
End singleRowsContainer
-->
</div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
</form>
<!--
End multiRowsContainer
-->
</div>
<div class="multiRow"></div>
<!--
End multiRowsContainer
-->
</div>
<!--
End mainInfoTwoColsContainer
-->
</div>
<!--
End: mainInfoTwoColsContainer
-->
</div>
<!--
End multiRowsContainer
-->
</div>
<div id="BottomAds" class="BottomAds" style="position: relative;left:200px"></div>
<!--
Start: R13.5 OSO - Sticky add to cart panel
-->
<div class="executeJS" style="display: hidden;"></div>
<!--
End: R13.5 OSO - Sticky add to cart panel
-->
<div id="emailMeOverlay" class="wm-widget-overlay-template" style="overflow: hidden" title="Notify me when it's back in stock"></div>
</div>
<script language="javascript"></script>
<div id="ROLLOVER" zindex="100000" style="display:none; text-align:left;" _pointermargin="-9px 0px 0px 10px" bubblemargin="5px 0 0 0" applyto="#ROLLOVER" pointer="true" bubbleposition="top" closebubbleonevent="mouseout" openbubbleonevent="mouseover" bubbleclassname="wm-widget-bubble-blue1px"></div>
<script type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="http://i2.walmartimages.com/css/quicklook_btn.css"></link>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://www.walmart.com/c/midas/loader.js"></script>
<script type="text/javascript" src="//www.walmart.com/c/midas/hl.js"></script>
<style type="text/css"></style>
<script type="text/javascript" src="http://www.google.com/adsense/search/ads.js"></script>
<script type="text/javascript" src="//www.google.com/ads/search/module/ads/3.0/beb93033d95ef74abd29c04a5d16f4dbee1ccd0a/n/search.js"></script>
<script type="text/javascript" src="//www.walmart.com/c/midas/m_ip.js"></script>
<style type="text/css"></style>
<div id="ipAdsenseContainer"></div>
<script type="text/javascript"></script>
<!--
start footer
-->
<div class="prtHid"></div>
</div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 0px; position: absolute; display: none;"></div>
<div class="prtHid"></div>
<!--
Start Pinterest call
-->
<script type="text/javascript"></script>
<!--
End Pinterest call
-->
<!--
-->
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script src="/__ssobj/static/ss-walmart.min.31246.js"></script>
<script></script>
<script></script>
<script></script>
<!--
MERGED
-->
<script id="ss-descriptors" type="text/javascript"></script>
<!--
SSSV
-->
<script></script>
<script></script>
<script></script>
<script></script>
<ul class="ui-autocomplete ui-menu ui-widget ui-corner-all ui-widget-autocomplete" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 12; top: 0px; left: 0px; display: none;"></ul>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div id="stickyAddtoCart"></div>
<img src="http://beacon.walmart.com:80/p13n/site/irs/beacon.gif?visito…ince_response=5831&time_since_init=0&timestamp=1397377059098" style="position: absolute; width: 0px; height: 0px; top: -1234px; left: -1234px;"></img>
<img src="http://beacon.walmart.com:80/p13n/site/irs/beacon.gif?visito…ce_init=219&time_since_response=6050&timestamp=1397377059317" style="position: absolute; width: 0px; height: 0px; top: -1234px; left: -1234px;"></img>
<img src="http://beacon.walmart.com:80/p13n/site/irs/beacon.gif?visito…ce_init=333&time_since_response=6164&timestamp=1397377059431" style="position: absolute; width: 0px; height: 0px; top: -1234px; left: -1234px;"></img>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: none; z-index: 50300; outline: 0px none;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-rmvideoPanel"></div>
<iframe id="google_osd_static_frame_9801270172171" name="google_osd_static_frame" style="display: none; width: 0px; height: 0px;"></iframe>
</body>
</html>
<!--
end footer
-->
You should probably check out Webkit or Spynner (got those from this SO question)- I've had a positive experience with PhantomJS for scraping content generated by JS in the past but it's not quite Python.

Categories