This seems a bit like a simplistic question but it keeps bothering me and I can't solve it. I am currently trying to make a div be replaced by iframe on click of a button. Despite the simplistic nature of this issue and me already having the right answer, I cannot manage to run it for some reason.
Firstly it was giving me:
$ not defined
Which I know it's an issue regarding the jQuery library not being correctly inserted in the html file. Afterwards I reshuffled my libraries and it still doesn't execute properly.
I've ready most of the previous topics where jQuery is not working with all the possible solutions suggested. I am quite aware of the two previous questions one with 33 and the other with 26 answers.
I've even tried downloading jQuery to a file and utilizing it localy but it still doesn't run. Can you help me figure out how to fix this.
jQuery code:
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
HTML code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src ="img/beme.png" class ="logo">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class ="banner">
<div class ="row" id ="mid-row">
<img src ="img/background.png" id ="big-image">
<img src ="img/play-button.png" id ="play">
</div>
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
</div>
How my libraries are inserted:
<script src="scripts/jquery-3.1.0.js"></script>
<!-- Angular and Bootstrap files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Angular and Bootstrap Files -->
<!-- Personal CSS file -->
<link rel ="stylesheet" href ="css/style.css">
<!-- Personal CSs file -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
I am basically trying to recreate this JSFiddle but with no luck:http://jsfiddle.net/ANRHT/6/
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
#import url(http://getbootstrap.com/dist/css/bootstrap.min.css);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src ="img/beme.png" class ="logo">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class ="banner">
<div class ="row" id ="mid-row">
<img src ="img/background.png" id ="big-image">
<img src ="img/play-button.png" id ="play">
</div>
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
</div>
Related
Bootstrap collaspe div is not pushing the parallax div, but instead going on top of it.
See here: https://codepen.io/carlo-designer/pen/zYZoNYM
Code is below:
<div class="container my-5">
<!-- Collapse -->
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<!-- Parallax.js -->
<div class="parallax-window" style="height:300px;" data-parallax="scroll" data-image-src="https://source.unsplash.com/4YhwiEsL0AQ/1000x600"></div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.min.js"></script>
Any idea where it may come from ?
Thanks
I have tries to position the items like:
so the markup after my change is here
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll col-4">
<button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#/">Home</a>
<a class="navbar-brand" href="#/report">Report</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="searchBox col-4" [collapse]="isCollapsed">
<form class="navbar-form search">
<div class="form-group">
<!--</typeahead>-->
<input [(ngModel)]="country"
[typeahead]="countries"
autocomplete="off"
(typeaheadOnSelect)="countrySelected($event)"
class="form-control searchInput" [ngModelOptions]="{standalone: true}"/>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedSearchType.name}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let type of searchType; let i = index;" role="menuitem">
<a (click)="onTypeChange(type)" class="dropdown-item cursor-pointer">{{type.name}}</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary" (click)="loadFromSheet()">
<span class="glyphicon glyphicon-paste"></span>
Load from sheet
</button>
</div>
</div>
</div>
But it seems like this:
How can I fix this so the "load" button is to the right most?
You can try changing the col-md-4 to col-md-3 or less and manipulate the spacing between the buttons with margin-left property on the Load button. You are probably pushing the button to the next row, so check the paddings and margins on the CSS properties surrounding the other elements if not finding success.
Hope this helps.
I published the still not finished website just to show you what I want
In this website:
http://urbanphenomena.net/shukri/#page3
the iFrame is redirecting to different images in different pages when the user clicks a specific link. Here is the code if needed:
<!--- Projects Section --->
<div class="section projects-section container-fluid" id="section4">
<div class="row">
<div class="col-lg-2 pull-left">
<div class="panel-group" id="accordion">
<div class="panel">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Architecture</a>
</h4>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<!--- FAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOne">
<h5>FAF</h5>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.html')">A01-FAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.html')">A01-FAF-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.html')">A01-FAF-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.html')">A01-FAF-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.html')">A01-FAF-5</button><br>
</ol>
</div>
<!--- KSAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseTwo">
<h5>KSAF</h5>
</a>
</div>
<div id="collapseTwo" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.html')">A02-KSAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.html')">A02-KSAF-2</button><br>
</ol>
</div>
<!--- KSAF10V --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseThree">
<h5>KSAF10V</h5>
</a>
</div>
<div id="collapseThree" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.html')">A03-KSAF10V-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.html')">A03-KSAF10V-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.html')">A03-KSAF10V-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.html')">A03-KSAF10V-4</button><br>
</ol>
</div>
<!--- Makkah --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFour">
<h5>Makkah</h5>
</a>
</div>
<div id="collapseFour" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.html')">A03-Makkah-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.html')">A03-Makkah-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.html')">A03-Makkah-3</button><br>
</ol>
</div>
<!--- Marina --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFive">
<h5>Marina</h5>
</a>
</div>
<div id="collapseFive" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.html')">A05-Marina-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.html')">A05-Marina-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.html')">A05-Marina-3</button><br>
</ol>
</div>
<!--- Residential --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSix">
<h5>Residential</h5>
</a>
</div>
<div id="collapseSix" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.html')">A06-Residential-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.html')">A06-Residential-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.html')">A06-Residential-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.html')">A06-Residential-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.html')">A06-Residential-5</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.html')">A06-Residential-6</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.html')">A06-Residential-7</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.html')">A06-Residential-8</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.html')">A06-Residential-9</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.html')">A06-Residential-10</button><br>
</ol>
</div>
<!--- SAB4 --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSeven">
<h5>SAB4</h5>
</a>
</div>
<div id="collapseSeven" class="collapse">
<ol>
buttona type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.html')">A07-SAB4-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.html')">A07-SAB4-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.html')">A07-SAB4-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.html')">A07-SAB4-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Interior</a>
</h4>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse2" class="collapse in" aria-labelledby="heading2">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/1.html')">I01-Interior-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/2.html')">I01-Interior-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/3.html')">I01-Interior-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/4.html')">I01-Interior-4</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/5.html')">I01-Interior-5</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/6.html')">I01-Interior-6</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/7.html')">I01-Interior-7</button><br>
</ol>
</div>
<!--- SFS --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOneInt">
<h5>SFS</h5>
</a>
</div>
<div id="collapseOneInt" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/1.html')">I02-SFS-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/2.html')">I02-SFS-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/3.html')">I02-SFS-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/4.html')">I02-SFS-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Fabrication</a>
</h4>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse3">
<ol>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
<a type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- iFrame --->
<div class="col-lg-7
col-md-7
col-sm-12
col-xs-12 pull-right
col-lg-pull-3 img-container
col-md-pull-3">
<iframe id="iframe" src="imgs/projects/ARCH/A01-FAF/1.html" allowfullscreen></iframe>
</div>
<script>
function setURL(url) {
document.getElementById('iframe').src = url;
}
</script>
</div>
</div>
Is there an more accurate way to do this than iframe?
and the thing I need help with mostly is:
When I reload the page, I want one of the buttons to be highlighted after the reload.
Like the class .active in bootstrap, when you first reload the page, the <li> is already highlighted without clicking it, thats what I want for the first button which is "A01-FAF-1". But the class active doesn't work.
How to do it?
Here is a very simple example:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
function showHer(){
$("#TestDiv").html("Something");
}
</script>
</head>
<body>
<div id="TestDiv" style="width:100px;height:100px;border:1px solid black">
Changeable stuff here.
</div>
<div onclick="showHer()" style="background:silver;border:1px solid black;cursor:pointer;display:inline;">
click me
</div>
</body>
</html>
You can see, in one line, I was able to change the content of a DIV elsewhere on the page.
Also note that there are no buttons. You can do this with a button, image, link, pretty much anything.
One other thing to note is that since you're using jquery to replace content in one small area of the page, the entire page doesn't need to update (faster) and hitting BACK doesn't just go back to the previous image, it would go back to the previous page.
I find that when I decrease the width of my browser to match the dimensions of a mobile screen,the div containing the row-offcanvas and another row that has the content has a really small width with a scrollbar.
This is a fiddle with my code
This is my html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fargo</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!--Add stuff here-->
</div>
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div id="sidebar" role="navigation" class="col-xs-4 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-primary">Panel 1</span>
<a href="#p1" class="accordion-collapse" data-toggle="collapse" data-target="#p1" data-parent="#accordion">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
<div id="p1" class="collapse panel-collapse in">
<div class="panel-body">
There is a table of details to be placed here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-primary">Panel 1</span>
<a href="#p2" class="accordion-collapse" data-toggle="collapse" data-target="#p2" data-parent="#accordion">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
<div id="p2" class="collapse panel-collapse in">
<div class="panel-body">
There is a table of details to be placed here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-primary">Panel 1</span>
<a href="#p3" class="accordion-collapse" data-toggle="collapse" data-target="#p3" data-parent="#accordion">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
<div id="p3" class="collapse panel-collapse in">
<div class="panel-body">
There is a table of details to be placed here
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-9">
<div class="visible-xs">
<button class="btn btn-primary btn-xs" data-toggle="offcanvas">
Toggle Menu
</button>
</div>
content
</div>
</div>
</div>
This is my css:
body{
padding-top:60px;
}
#sidebar
{
height:100%;
}
UPDATE:
I changed to navbar-static-top and added a height of 100% to body and sidebar.
I changed to col-xs-12 instead of col-xs-4 for #sidebar.
I still find that at mobile width,the container does not occupy the height of the window(except for what has been taken),is it because the content is also within the same row.
Here is an updated fiddle with all these changes factored in.
UPDATE2:
I moved the main page content to another container div hopeful of solving the issue but the same problem continues to plauge me.
This is an updated fiddle to reflect this
Try this:
<div style="margin-top:50px" class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div id="sidebar" role="navigation" class="col-xs-12 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">
Use col-xs-12 for mobile view
i need help with my modal it just will not display. i can't seem to find what is wrong.
below is the code
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span><img src="img/logo.png"></span>
</button>
<a class="navbar-brand" href="#">Cotton Board of Zambia</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="search" class="form-control">
</div>
<button type="submit" class="btn btn-success">Search</button>
</form>
</div>
</div>
</div>
<table id="maintable" >
<tr>
<td>
<table align="left" width="100%">
<tr>
<td><p><a data-toggle="modal" href="#reglog" class="btn btn-primary btn-large">Register & Login</a></p></td>
<td>
<!--register/login modal-->
<div class="modal hide fade in" id="reglog" style="display: none; " >
<div class="modal-header">
<h4>Cotton Board of Zambia</h4><br>
<h6>Login Here</h6>
</div>
<div class="modal-body">
<form>
<label>Some text</label>
<input type="text">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">close</button>
Close
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/modal.js"></script>
</td>
</tr>
</table>
</td>
<td>
<table align="right" width="100%">
<tr>
<td>
<div><h3>Our Location</h3></div>
<div id="map">
<div id="map_canvas" style="width: 200px; height: 300px;"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div><hr/></div>
<footer>
<p>© 2013</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>');</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
from the little knowledge i have on HTML 5 seems like the code should work.
kindly help me figure out why the Modal will not display in the browser.
i also added the link as suggested and downloaded Modal.js but the modal still will not show in my browser. Kindly Help.
You need to change your modal from this:
<div class="modal hide fade in" id="reglog" style="display: none;" >
to this:
<div id="reglog" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
Bootstrap will automatically take care of hiding and displaying the modal for you, so you don't need to include thestyle="display:none;".
Here is a link to the modals in the documentation for Bootstrap: http://getbootstrap.com/2.3.2/javascript.html#modals