Iframe in Bootstrap, not everything showing?

Report · Jul 31, 2017

Hello,

Maybe this is something simple, but I'm updating my client's website, and they sell cars, so the cars are supposed to show like this (on their "old" site) Om oss .

I'm getting the code from a third party. Now when I put the same code on the new site, it doesn't look the same? Please help...Välkommen till Norrbilar!

Kind regards,

Carolin

Code is here:

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Välkommen till Norrbilar!</title>
	<!-- Bootstrap -->
	<link href="css/main.css" rel="stylesheet">
	<link href="css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i\|\|function(){
	(i.q=i.q\|\|[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-50424376-1', 'auto');
	ga('send', 'pageview');

	</script>

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<!--Carlist code (Expanding Iframe)-->
	<script type="text/javascript">
	var accesspack = "norrbilar"; // name of dealercode in .NET package
	var iframewidth = "100%"; // iframewidth
	var scrollHeight = "1"; // height to scroll anchor from absolute top of page.

	// PERSONBILAR
	var criteriaString = "AEADUDIAIYAOeQAA!"; // searchstring from bytbil.
	var showPage ="lista"; // name of the page

	</script>

	<script type="text/javascript" src="http://access.bytbil.com/norrbilar/access/Content/GetContent/1/jquery.ba-postmessage.js"></script>
	<script type="text/javascript" src="http://access.bytbil.com/norrbilar/access/Content/GetContent/1/jquery.ba-bbq.js"></script>
	<script type="text/javascript" src="http://access.bytbil.com/norrbilar/access/Content/GetContent/1/jquery.expandable-iframe.js"></script>
	<!-- End of Carlist code-->
	</head>
	<body>
	<div class="container">
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false">Toggle navigation<span class="icon-bar"></span></button>
	<a class="navbar-brand" href="#"><img src="bilder/Logo.png" width="300" height="45" alt=""/></a></div>
	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="defaultNavbar1">
	<ul class="nav navbar-nav">
	<li class="active"></li>
	<li></li>
	</ul>
	<form class="navbar-form navbar-left" role="search">
	<div class="form-group"> </div>
	</form>
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#">KAMPANJER</a></li>
	<li><a href="#">NYA BILAR</a></li>
	<li><a href="#">BILAR I LAGER</a></li>
	<li><a href="#">SERVICEVERKSTAD</a></li>
	<li><a href="#">KONTAKTA OSS</a></li>
	</ul>
	</div>
	<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid -->
	</nav>

	<article class="content">
	<h1>Bilar i lager</h1>
	<section>
	<p><div class="ContentAP" id="iframeDiv" contentEditable="False"></div></p>
	</section>
	<!-- end .content --></article>

	<div class="row footer">
	<table width="100%" cellpadding="2" cellspacing="2" class="footertabell" itemscope itemtype="http://schema.org/LocalBusiness">
	<tr>
	<td width="25%"><b itemprop="name">Norrbilar i Eskilstuna AB</b></td>
	<td width="25%"><b itemprop="telephone">Telefon: 016-12 58 00</b></td>
	<td width="25%"><b>Öppettider Försäljningen:</b></td>
	<td width="25%"><b>Öppettider Verkstaden:</b></td>
	</tr>
	<tr>
	<td width="25%" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Gustafsvägen 5 </span><br><span itemprop="postalCode"> 633 46 </span><span itemprop="addressLocality">Eskilstuna</span></td>
	<td width="25%"> </td>
	<td width="25%"><span itemprop="openingHours" content="Mo-Th 10:00-18:00">Måndag - Torsdag: 10.00 - 18.00 </span><br><span itemprop="openingHours" content="Fr 10:00-17:00">Fredag: 10.00 - 17.00</span><br><span width="25%" itemprop="openingHours" content="Sa 11:00-14:00">Lördag: 11.00 - 14.00</span></td>
	<td width="25%" style="vertical-align: top;">Måndag - Fredag: 07.30 - 17.00</td>
	</tr>
	</table>
	<h6 class="text-center">©2017 Norrbilar</h6>

	</div>
	</div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery-1.11.3.min.js"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.js"></script>

	</body>
	</html>

Report · Jul 31, 2017

You are calling one version of the jQuery library in line #9 and another version in line #101.

Just calling the library twice will send most jQuery plugins haywire, let alone when they are two different versions.

My solution would be to get rid of the older jQuery version (line #9) and move all of the JS files to after line #104 (bootstrap.js)

Wappler, the only real Dreamweaver alternative.

Report · Jul 31, 2017

Thank you ever so much, that was it!

Have a wonderful day

Best Regards,

Carolin