I am going through the process of revamping a very old website that used frames. I have started with the navigation menu, adopting the functionality of a jQuery drop down.
Although the menu successfully drops down on the homepage, when i have i navigate to another, the drop down menu's fail to overlap into the new frame. I can see a part of the drop down, however it is going 'behind' the new frame.
FrameStructure.html:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-gb">
<title>Product Menu</title>
</head>
<frameset rows="170px,*" border="0">
<frame id="PageHeader" name="PageHeader" src="PageHeader.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="Page Header" noresize>
<frameset id="PageFrames" name="PageFrames" cols="250px,*">
<frame id="PageNavigation" name="PageNavigation" src="Nav.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="Page Navigation" noresize>
<frameset id="ContentFrames" name="ContentFrames" rows="*,0">
<frame id="PageContent" name="PageContent" src="Blank.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" title="Input Page" noresize>
<frame id="PageHelp" name="PageHelp" style="BORDER-TOP: white 2px solid;" src="Help.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" title="Help Page">
</frameset>
</frameset>
<noframes>Your browser does not support frames</noframes>
</frameset>
</html>
PageHeader.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Page Header</title>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript Functionality to create drop down menu -->
<script type="text/javascript">
$(document).ready(function() {
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<style>
/*nav {background:#FFF;float:left;}*/
nav ul {
text-align:left;
}
nav ul li {
float:left;
display:inline;
border-right: 1px solid #083D72;
}
nav ul li:hover {
background:#2D8FF0;
}
nav ul li a {
display:block;
color:#444;
}
nav ul li ul {
position:absolute;
width:180px;
background:#09427C;
font-size: 12px;
}
nav ul li ul li {
width:180px;
}
nav ul li ul li a {
display:block;
color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
display:none;
}
nav ul li:hover ul.fallback {
display:block;
}
</style>
</head>
<body onload="docOnLoad()">
<form id="frmPageHead" name="frmPageHead" action="">
<!-- BANNER START -->
<table id="banner" width="100%" border="0" cellspacing="0" cellpadding="0" style="">
<tr class="">
<div class="wrap">
<hgroup>
<h1 class="logo"><img src="images/logo.png" width="163" height="59"></h1>
<h2 class="site-heading">Welcome</h2>
</hgroup>
</div>
</tr>
</table>
<!-- BANNER END -->
<!-- START nav.site-nav -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="menu-nav--home"><span class="icon-home"></span></li>
<li class="data-sources">Date Sources <span class="icon-caret-down"></span>
<li>
Information
<ul class="fallback">
<li>New Customer</li>
<li>Existing Customer</li>
<li>Pricing</li>
<li>Testimonials</li>
<li>Our Services</li>
</ul>
</li>
<li>
Additional Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>How To's</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Voice Matters</li>
<li>The Environment</li>
</ul>
</li>
<li>
Products
<ul class="fallback">
<li>Sound Deadening</li>
<li>Wiring</li>
<li>Connections</li>
</ul>
</li>
<li>
Need Help?
<ul class="fallback">
<li>Need Help</li>
<li>FAQ's</li>
<li>Contact Us</li>
</ul>
</li>
<li>
Cookies?
</li>
</li>
</ul>
<!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
</form>
<form id="frmDuy" name="frmDuy" method="post" action="">
<input type="hidden" id="ONLINE_HELP" name="ONLINE_HELP" value=""/>
</form>
</body>
</html>
I've spent quite a lot of time trying to get this to work with little success so any information is highly appreciated.
Thanks.
Update:
Now attempting to use layout structure:
<head>
<script> $(function({ $("#header").load("PageHeader.html"); }); </script>
</head>
<body>
<div id="header">
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
</html>
I receive the following error:
SyntaxError: missing : after property id
$(function({ $("#header").load("PageHeader.html"); });
Which points to ("#header"
Update:
Tried this:
<body>
<div id="header">
<script> $(function({ $("#header").load("PageHeader.html"); }); </script>
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
Still receiving the following error:
SyntaxError: missing : after property id
$(function({ $("#header").load("PageHeader.html"); });
Which points to ("#header"
Here a solution in jquery: http://viewsboard.com/boards/view/discussion/2/550
Here some example with code: http://deluxe-menu.com/cross-frame-mode-sample.html
Here a simple workaround: http://www.telerik.com/support/kb/aspnet-ajax/menu/can-radmenu-expand-over-other-frames-if-it-is-in-a-frame-itself.aspx
here another example: http://www.sothink.com/product/dhtmlmenu/store/crossframe/twomenus/
here another one: http://www.zzzxo.com/q/answers-drop-down-menu-over-frames-14560398.html
This problem seems old, old as frames, can I suggest you to eliminate frames?
Edit:
Excluding the tables layout (it was abandoned years ago), you should consider that frame are deprecated in html5.. In your place I should start with some layout, or also just like this:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="javascript/modernizr-2.6.2.min.js"></script>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<style>
div{
border-radius:20px; /*for border rounded*/
}
#header{
height:150px;
background-color:#FF0;
min-width:800px;
margin: 0 auto;
}
#pageNavigation{
min-height:450px;
margin: 0 auto;
width:20%;
background-color:#666;
float:left;
min-width:100px;
}
#contentFrames{
min-height:450px;
width:58%;
margin-left: 2px;
margin-right: 2px;
margin: 0 auto;
background-color:#03C;
float:left;
}
#pageHelp{
min-height:450px;
width:20%;
margin: 0 auto;
background-color:#3F0;
float:left;
min-width:100px;
}
#content{
margin: 0 auto;
width:90%;
min-width:720px;
}
#footer{
height:100px;
background-color:#FF0;
min-width:800px;
margin: 0 auto;
clear:both;
}
</style>
</head>
<body onload="docOnLoad()">
<div id="header">
<? //include('pageHeader.html'); ?>
<h1>header</h1>
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
Related
I am creating a website, using html, bootstrap css and jquery.
This is the html code:
<!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.0">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo&display=swap">
<link rel="stylesheet" href="styles.css">
<title>TimeGuard</title>
</head>
<body>
<div class="main">
<div>
<nav class="navbar">
<ul id="firstul" class="nav nav-tabs nav-justified">
<li class="nav-item active" style="width:200px"><a class="nav-link"
href="#dashboard">DASHBOARD</a></li>
<li class="nav-item inactive" style="width:200px;"><a class="nav-link"
href="#reports">REPORTS</a></li>
<li class="nav-item inactive" style="width:500px;"><a class="nav-link"
href="#addict">ADDICT SETTINGS</a></li>
</ul>
</nav>
</div>
<div class="tab-content" style="padding:20px;">
<div class="tab-pane fade show active" role="tab-panel" id="dashboard">
<div>
<h1>OVERVIEW</h1>
<div class="container-fluid box">
<div class="row justify-content-around">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
<div class="overview col-3">
<div style="font-size:79px;">
00
</div>
</div>
</div>
<div class="row justify-content-center" style="margin-top:50px;">
<div class="overview col-3">
<div style="font-size:79px;">
00:00:00
</div>
</div>
</div>
</div>
</div>
<div>
<h1>TARGET WEBSITES</h1>
<div class="box container-fluid">
<div class="row justify-content-center">
<div class="tarweb col-7">
TARGET WEBSITES
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" role="tab-panel" id="reports">
<div class="box">
</div>
</div>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Following is the jquery code, with a purpose to switch the between the navigation tabs (DASHBOARD, REPORTS and ADDICT SETTINGS). But the action does not take place on all the tabs.
$(document).ready(function(){
$("#firstul li.inactive").on("click",function(){
$("#firstul li.active").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
});
I will be glad if someone could help me out.
Also this is the CSS code if required:
body{
font-family: 'Exo', sans-serif;
}
.main{
background-color:rgb(4, 209, 4);
margin:30px;
border-radius:10px;
padding-top: 0px;
padding-bottom:20px;
}
.navbar{
background-color:white;
padding-left:0px;
padding-right:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
.nav-link{
color:black;
}
li{
font-size:25px;
text-align:center;
}
li.active{
background-color: rgb(4, 209, 4);
color:black;
border:5px double;
border-bottom:none;
}
li.inactive{
background-color: green;
}
.box{
border:1px solid rgb(92, 86, 86);
border-radius:10px;
padding:20px;
}
.overview{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
text-align:center;
}
.tarweb{
background-color: white;
padding:5px;
justify-content:center;
border-radius:50px;
}
Try to have look at this entry
I don't think that removing and adding classes is the way to go.
Or is this what you want?
Try:
$(document).ready(function(){
$("#firstul li").on("click",function(){
$("#firstul li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
});
The problem in your solution is that you do not add the click handler to the active tab item. In the solution above we:
Add the handler to all tab items
On click, inactivate all tab items
Activate only the clicked item
Here is my jquery:
$(".time-block .listgroup").sortable({
connectWith: $(".time-block .listgroup"),
items: "> textarea",
placeholder: "highlight",
//helper: "clone",
update: function(event){
var changeArr= []
$(this).each(function(){
changeArr.push({
text: $(this)
.children()
.find("textarea")
.val()
})
})
// update on localstorage object and save and get on page refresh
saveEvent()
}
})
Here is what the html looks like:
<div class="container">
<!-- Timeblocks go here-->
<div class ="time-block">
<div class ="hour" id="9"> 9 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class ="time-block">
<div class ="hour" id="10"> 10 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
I believe I put the appropriate CDNs at the bottom of the body:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="assets/script.js"></script>
</body>
I'm a beginner trying to experiment with different functionalities and I don't really understand what is going wrong here. Appreciate the help in advance.
The jQuery UI Sortable needs to be applied to the parent element that contains the items you want sorted. I think you will get successful results when you create the container in the right place. Application test image, sample codes and references are available below:
$(function () {
$('#container').sortable({
placeholder: "ui-state-highlight",
helper: 'clone'
});
})
#container {
margin-left: 300px;
margin-top: 100px;
position: relative;
}
.newStep {
cursor: pointer;
float: right;
font-size: 10px;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: -12px;
margin-top: 0 !important;
padding: 3px 7px;
width: 80px !important;
}
.step {
border-top-left-radius: 0 !important;
font-family: lucida Grande;
margin: 4px;
}
.stepNumber {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
left: -20px;
padding: 10px;
position: absolute;
top: 3px;
}
.inset {
color: white;
background: none repeat scroll 0 0 #000000;
border-radius: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div style="float:left; clear:both;" id="container">
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">1</span>
<textarea placeholder="1 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">2</span>
<textarea placeholder="2 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">3</span>
<textarea placeholder="3 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
</div>
</body>
</html>
References
jQuery Sortable Post
Consider the following based on the Demo: Sortable | jQuery UI | Include / exclude Items.
$(function() {
function toArray(sort) {
var results = [];
$("li", sort).each(function(i, el) {
if ($(el).hasClass("hour")) {
results.push({
hour: $(el).attr("id"),
details: $(el).next().find("textarea").text()
});
}
});
return results;
}
function saveEvent(string) {
//localStorage.setItem("hours", string);
console.log("Saving", string);
}
$(".time-blocks").sortable({
cancel: ".hour",
handle: ".fa-grip-lines-vertical",
update: function(event) {
saveEvent(JSON.stringify(toArray(this)));
}
});
});
.time-blocks {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.time-blocks .ui-widget-header {
padding-left: 1.5em;
}
.time-blocks textarea {
width: calc(100% - 50px);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="container">
<!-- Timeblocks go here-->
<ul class="time-blocks ui-widget">
<li class="hour" id="9">
<div class="ui-widget-header">9 AM</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 1</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="10">
<div class="ui-widget">
<div class="ui-widget-header">10 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 2</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="11">
<div class="ui-widget">
<div class="ui-widget-header">11 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 3</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
</ul>
</div>
You have one primary list. Each List Item has either Hours or Details. We exclude (cancel) the Hours and only worry about sorting the details into Hours.
Since this does not align well, we need a function that can combine the data. This combines the relative data so that we get an Array of Object where the Hours relate to the Details.
Sortable may not be best for this since I suspect you7 only want 1 textarea per hour. There is a chance the User may drag one into another.
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<!-- required css -->
<link rel="stylesheet" type="text/css" href="http://localhost/blog/public/css/jquery.bxslider.css">
<style type="text/css">
.sliderContainer {
width: 320px;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="float:right;">
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>1st Advertisement</h2>
<tr>
<td>
<a id="adv" href="http://www.w3.org"><img name="noslide" id="noslide" alt="my images" height="240"
width="320"
src="http://2.bp.blogspot.com/-M5lNkr0H3Bk/VJfppu-wPxI/AAAAAAAARhs/FSZY0iVdCF4/s1600/Hand%2BPainting%2Bhd%2Bimagess%2B(3).jpg"/></a>
</td>
</tr>
<tr>
<td align="center" style="font:small-caps bold 15px georgia; color:blue;">
<div id="fixeddiv">1st Advertisement</div>
</td>
</tr>
</table>
{{$count=count($slides)}}
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>2nd Advertisement</h2>
<div class="sliderContainer">
<ul class="bxslider">
#foreach($slides as $key=>$val)
<li><a>{{$val->id}}</a><img src="http://localhost/blog/public/images/{{$val->image_name}}"/></li>
#endforeach
</ul>
</div>
</table>
</div>
<!-- required js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
// see documentation for more options
'auto': true
});
});
</script>
</body>
</html>
public function index()
{
$slides = DB::table('sliders')->get();
return view('home')->with('slides',$slides);
}
There are four images saved in my db. This is showing the images in a slider, but I want to make it dynamic. I will tell that image 1 will be shown 4 times and image 2 will be 2 times both randomly not serially. How can I do it?
Let's assume your HTML looks like this:
<ul id="container">
<li class="slide">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
</ul>
Then you could try the following:
$('.bxslider').bxSlider({
'auto': true,
onSlideBefore: function($slideElement, oldIndex, newIndex) {
// updated newIndex here with your logic
}
});
When my navbar is collapsed, scrolling is normal and the navbar becomes fixed to the top of the page when scrolling past the header/ jumbotron. However, when the navbar is expanded (revealing 'one', 'two', and 'three'), the page will jump skipping some of the content and covering it up by the navbar. How can I make the page scroll/ behave "normally" and allow the expanded navbar fix to the top of the page without jumping over content below?
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script type="text/javascript">
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
nav {
z-index: 9;
}
.emoji p:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#f64e09; color:#fff; height:200px;">
<div class="container text-center" style="color: white;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Website</h1> </div>
<h1 style="font-size: 30px; font-family: 'Cabin', sans-serif;">
</h1> </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="navId" class="navbar-brand" style="color:white;" href="#">Navbar Title</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>One </li>
<li class="active">Two </li>
<li>Three </li>
</ul>
</div>
</div>
</nav>
<!-- Start containter for everything south of navbar -->
<div class="container-fluid">
<div class="container" style="padding-top: 20px;">
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1> </div>
</div>
<div class="panel panel-default" style="font-family: 'Cabin', sans- serif;">
<div class="panel-footer">
<center>
<p>This is the footer</p>
</center>
</div>
</div>
</body>
</html>
As you probably know, the reason why your content is not "jumping" while navbar is collapsed is in this style:
.affix + .container-fluid {
padding-top: 70px;
}
But when you are extending navbar, padding remains the same, but navbar itself becames taller. So, we have to somehow distingush those situations.
We can add some javascript to add an extra class to the <nav> element:
<script type="text/javascript">
$(document).ready(function() {
var navBar = $('#myNavbar');
$('.navbar-toggle').click(function(e) {
if (!navBar.is(':visible')) {
// #myNavbar is about to be shown, add extra class to parent <nav>
navBar.parents('nav').addClass('affix-visible-navbar');
} else {
// #myNavbar is about to be hidden, remove extra class from parent <nav>
navBar.parents('nav').removeClass('affix-visible-navbar');
}
});
});
</script>
and define new css-class:
.affix.affix-visible-navbar + .container-fluid {
padding-top: 155px !important;
}
So the complete working solution will look like this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script type="text/javascript">
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
.affix.affix-visible-navbar + .container-fluid {
padding-top: 155px !important;
}
nav {
z-index: 9;
}
.emoji p:hover {
text-decoration: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var navBar = $('#myNavbar');
$('.navbar-toggle').click(function(e) {
if (!navBar.is(':visible')) {
// #myNavbar is about to be shown, add extra class to parent <nav>
navBar.parents('nav').addClass('affix-visible-navbar');
} else {
// #myNavbar is about to be hidden, remove extra class from parent <nav>
navBar.parents('nav').removeClass('affix-visible-navbar');
}
});
});
</script>
</head>
<body>
<div class="container-fluid" style="background-color:#f64e09; color:#fff; height:200px;">
<div class="container text-center" style="color: white;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Website</h1> </div>
<h1 style="font-size: 30px; font-family: 'Cabin', sans-serif;">
</h1> </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="navId" class="navbar-brand" style="color:white;" href="#">Navbar Title</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>One </li>
<li class="active">Two </li>
<li>Three </li>
</ul>
</div>
</div>
</nav>
<!-- Start containter for everything south of navbar -->
<div class="container-fluid">
<div class="container" style="padding-top: 20px;">
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1> </div>
</div>
<div class="panel panel-default" style="font-family: 'Cabin', sans- serif;">
<div class="panel-footer">
<center>
<p>This is the footer</p>
</center>
</div>
</div>
</body>
</html>
Of course, if you are changing #myNavbar elements (e.g. add/remove items), you have to adjust padding in the .affix.affix-visible-navbar + .container-fluid {}
Within my webpage I am having issues with a iFrames. The iFrame is being used to cycle through different Webpages.
The issue I am experiencing is that it appears as only a thin bar (see picture)? Can someone help me on how I fit the cycling websites within a defined diameter? I have research around this topic as I am already working with some code found in iFrames.
iFrame_Issue
Thanks in advance! -Adam
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Tab Title In Window-->
<title>GKN BI/IT PVD Notice Board</title>
<!-- CSS Style-->
<style type="text/css">
body { margin:0;padding:0;font-family: Sans-Serif;line-height: 1.5em;}
header {background: #FFFFFF;height: 100px;}
header h1 {margin: 0;padding-top: 15px;}
main {padding-bottom: 10010px;margin-bottom: -10000px;float: left;width: 100%;}
nav {padding-bottom: 10010px; margin-bottom: -10000px;float: left;width: 230px; margin-left: -230px;background: #FFFFFF;}
footer{ clear: left;width: 100%;background: #FACC2E;text-align: center;padding: 0px 0;}
#wrapper {overflow: hidden;}
<!--Same as 'nav' width -->
#content {margin-right: 230px; }
<!-- Padding for content -->
.innertube {margin: 15px;margin-top: 0; height: 200%; width: 200%;}
p {color: #555;}
nav ul {list-style-type: none;margin: 0;padding: 0;}
nav ul a {color: #336699;text-decoration: none;}
</style>
</head>
<!--Web banner-->
<header>
<center-left>
<table width="875" align="left" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Images/bi_it_banner.png">
</td>
</tr>
<!--Web banner 2-->
<tr>
<td>
<img src="Images/background.jpg">
</td>
</tr>
</table>
</header>
<body>
<div id="wrapper">
<main>
<!--Title and iFrame Cycle-->
<div id="content">
<div class="innertube">
<h1>Current Projects</h1>
<br>
<br>
<!--iFrame-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var sites = [
"http://ourspace.gkn/drivelive/",
"http://ishare.driveline.gkn.com/SitePages/Home.aspx",
"https://idash.driveline.gkn.com/josso/signon/login.do?josso_back_to=http://idash.driveline.gkn.com/applicationOverview/josso_security_check&josso_partnerapp_id=applicationOverview"
];
var currentSite = sites.length;
$(document).ready(function () {
var $iframe = $("iframe").attr("src","http://www.google.com");
setInterval(function() {
(currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
$iframe.attr("src",sites[currentSite]);
}, 7000);
});
</script>
<style type="text/css" media="screen">
iframe {
height: 200%;
width: 100%;
border: none;
}
</style>
<br>
<iframe></iframe>
<br>
</div>
</div>
</main>
<!-- Code for Navigation Bar and Time&Date -->
<nav>
<div class="innertube">
<!--Time/Date Function-->
<center>
<table width="200" align="left" cellpadding="0" cellspacing="0">
<script type="text/javascript">
<!--Date-->
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
<!--Time-->
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+"";
}
<!--Load into webpage and carry out function above-->
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<h3>GKN Sites</h3>
<ul>
<li><a target="_blank" href="http://ourspace.gkn/drivelive/">Drivelive</a></li>
<li><a target="_blank" href="http://ishare.driveline.gkn.com/IT/SitePages/Home.aspx">BI/IT iShare</a></li>
<li><a target="_blank" href="">Others?</a></li>
</ul>
<h3>Suggested Reading</h3>
<ul>
<li><a target="_blank" href="#">Link 1</a></li>
<li><a target="_blank" href="#">Link 2</a></li>
<li><a target="_blank" href="#">Link 3</a></li>
<li><a target="_blank" href="#">Link 4</a></li>
<li><a target="_blank" href="#">Link 5</a></li>
</ul>
<h3>External News</h3>
<ul>
<li><a target="_blank" href="http://www.bbc.co.uk/news">BBC News</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/travel">BBC Travel</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/weather/">BBC Weather</a></li>
</ul>
</div>
</nav>
</div>
</table>
<!-- End of code for Navigation Bar -->
<footer>
<div class="innertube">
<marquee><img src="Images/GKN.svg.png" height="25" width="60"> Hopefully feed text from text file here</marquee>
</div>
</footer>
</body>
</html>