The facebook comment works well until it is given too many comments and overlaps into the footer. Is there any way to limit the Facebook comment plugin to the point where it stays within a table and uses a sidebar to scroll up and down?
The url showing this is: http://cardspoiler.com/Bootstrap/Munter/Theme/Counterfeit_coin_bootstrap.html
Here's the code:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Cardspoiler - Counterfeit Coin</title>
<link rel="shortcut icon" href="../../../../Cardspoiler_Title_Logo.tif">
<meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
<meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526 , #414345);
background: linear-gradient(to right, #232526 , #414345);
margin: 0em;
}
a { cursor: pointer; cursor: hand; }
footer {
position: fixed;
width: 100%;
bottom: 0;
height: 130px;
background: #e4e6e5;
background-color: rgba(228,230,229,.9);
transform: translateZ(0);
-webkit-transform: translateZ(0);
border-top: solid transparent 5px;
}
#content{
padding: 70px 0 0 0;
}
#text-content{
padding: 175px 0 0 0;
}
.col-aligncenter{float: none;margin: 0 auto;}
#locator { /* for the FB comments plugin */
position: absolute; visibility: visible; left: 775px; top: -320px; height: 100px; width: 500px; z-index: 200;
}
#media (min-width: 1000px) {
.container{
max-width: 1200px;
}
}
.fb_container{
height: 400px;
}
</style>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container-fullwidth">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../../Navbar/Home.html">Cardspoiler</a>
<div class="nav-collapse collapse navbar-responsive-collapse" >
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="druid" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="priest"title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="paladin" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="hunter" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
<li data-slide="7" class="col-12 col-sm-1"><a id="mage" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
<li data-slide="8" class="col-12 col-sm-1"><a id="shaman" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
<li data-slide="9" class="col-12 col-sm-1"><a id="warlock" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
<li data-slide="10" class="col-12 col-sm-1"><a id="rogue" htitle="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
<li data-slide="11" class="col-12 col-sm-1"><a id="minions" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
<li data-slide="12" class="col-12 col-sm-1"><a id="spells" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
</ul>
<div class="row">
<div class="col-sm-1 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="table-responsive" id="content">
<div class="container">
<table class="table">
<td valign="top">
<img src="../../../../0/Counterfeit_Coin.png" align="left" class="img-responsive">
<div id="center">
<div id="text-content">
<font color="#888888" style="font-size:300%">
Counterfeit Coin
</font>
<br>
s <br>
<font style="font-size:160%" color="9B764C">
Cost:
</font>
<font style="font-size:130%" color="#888888">
0
</font>
<br>
<font style="font-size:160%" color="9B764C">
Type:
</font>
<font style="font-size:130%" color="#888888">
Spell
</font>
<br>
<font style="font-size:160%" color="9B764C">
Text:
</font>
<font style="font-size:130%" color="#888888">
Gain 1 mana crystal this turn only.
<div id="right">
<div id="locator">
<div class="hidden-xs hidden-sm">
<div class="fb_container">
<div class="fb-comments" data-href="https://www.facebook.com/cody.bontecou" align="right" data-width="500px" data-numposts="3"></div>
</div>
</div>
</div>
</div>
<br>
<br><br>
<br><br>
<br>
<br>
</font>
</div>
</div>
</div>
</table>
</div>
</div>
<center>
<footer>
<div class="footer" id="footer">
<div class="container.customcontainer">
<div class="col-lg-6">
<div align="right">
<font color="888888" size="4%">CARDSPOILER.COM</font>
<font color="9B764C" size="3%">
<br>
Freedom to know
</font>
<br>
<br>
<font size="2%" color="666666">
We are here to bring you visual, leaked spoilers for all of <br> the cards you love within a simple gallery.
<br>
</font>
<font color="#333333">
CONTACT US
PRIVACY POLICY
</font>
</div>
</div>
<div class="col-lg-6">
<div align="left">
<font color="#888888" size="2%">
Mean Streets of Gadgetzan
</font>
<br>
<font color="#888888" size="2%">
One Night in Karazhan
</font>
<br>
<font color="#888888" size="2%">
Whispers of the Old Gods
</font>
<br>
<font color="#888888" size="2%">
The League of Explorers
</font>
<br>
<font color="#888888" size="2%">
The Grand Tournament
</font>
<br>
<font color="#888888" size="2%">
Blackrock Mountain
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '220939261681295',
xfbml : true,
version : 'v2.8'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
$(".fb_container").css("height","400px");
</script>
</html>
Your problem is not the sidebar, but the footer.
Add these rules to your code:
footer {
z-index: 200;
}
#content {
padding-bottom: 130px;
}
Side note: If you coded that layout, you should read some more about layouts, responsiveness and CSS do's and don'ts. If someone else made it for you, you probably want to have a chat with a professional web-developer.
Related
I have couple of questions about site, which I'm making with help of Bootstrap 4. I would like to make simple page just using on screen space (no scroll except mobile version) with logo in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch. I made some HTML/CSS proposals, but they didn't work properly. Do you have some ideas how to make it? :/
Thanks a lot!
<!DOCTYPE html>
<html lang ="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page information -->
<meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
<meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
<meta name="author" content="Ondřej Sloup">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
</main>
And CSS
/*INSERT*/
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body, main {
height: 100% !important;
max-width: 100% !important;
}
body {
background: grey !important;
}
/*Header*/
header {
height: 15%;
}
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
/*Images*/
.row {
height: 30% !important;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
For future, you can use the http://shoelace.io/
That being said, your html code should look like this:
<div class="container">
<div class="row Logo">
<div class="col-sm-3">
<!-- This is where you should put your logo image -->
</div>
</div>
<div class="row Menu">
<div class="col-sm-12">
<!-- this is where your menu goes in -->
</div>
</div>
<div class="row Images">
<div class="col-sm-4">
<!-- your first image -->
</div>
<div class="col-sm-4">
<!-- your second image -->
</div>
<div class="col-sm-4">
<!-- your third image -->
</div>
<div class="col-sm-4">
<!-- your forth image -->
</div>
<div class="col-sm-4">
<!-- your fifth image -->
</div>
<div class="col-sm-4">
<!-- your last image -->
</div>
</div>
</div>
Also, have a look at the bootstrap layout page https://getbootstrap.com/docs/4.0/layout/grid/
I'm a beginner working on a project in the MEAN stack. I'm getting inconsistent HTML previews when I render it by itself and when I run it from the project.
What it's supposed to look like (when I preview it by itself):
imgur
and here's what it looks like when I build the project:
imgur
I'd like the partial view to sit under the header and fill the remaining space on the screen.
Here's my index.html
<!doctype html>
<html ng-app="angulobby">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="css/text" href="./stylesheets/style.css">
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./main.js"></script>
<script src="./services.js"></script>
<script src="./controllers.js"></script>
<base href="/">
</head>
<body data-ng-controller="IndexController">
<!-- HEADER AND NAVBAR -->
<div class="box">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AnguLobby Prototype</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Login</li>
<li><i class="fa fa-comment"></i> Register</li>
<div ng-controller="logoutController">
<a ng-click='logout()' class="btn btn-default">Logout</a>
</div>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where the content will be injected -->
<div data-ng-view></div>
</div>
</div>
</body>
</html>
and here is the partial view home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script></script>
</body>
</html>
and finally styles.css
html, body{
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
#main {
background-color: aliceblue;
flex-grow: 1;
}
#ng-view {
height: 100%;
}
#container {
height: 100%;
width: 100%;
}
#left, #middle, #right {
height: 100%;
width: 33%;
}
#chat-container {
display: flex;
flex-direction: column;
background-color: lightblue;
height: 100%;
width: 100%;
}
#messages-box {
flex-grow: 1;
}
You have an HTML page in the div of another HTML page. The inner page is 100% height of the div (which is only as high as the content)
Just remove the html and body tags from the home.html partial. You may want to examine how you are including your js scripts as well...
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
I have been searching the internet trying to solve a problem, and have found a lot of solutions which non have worked which leads me to believe that non of the solutions were a fit to my unique situation.
I am building a page with Bootstrap and at the bottom of the HTML there is a call for a jquery script "js/jquery-1.11.3.min.js" and this controls things like the Bootstrap navbar drop-downs. And I have another jquery call in the head, and this controls a photo gallery. If I delete the call for "js/jquery-1.11.3.min.js" the photo gallery works great, but my navbar drop-downs stop working, and if I leave the call for "js/jquery-1.11.3.min.js" then the navbar works but the photo gallery stops working..
I tried just using one call but unfortunately the photo gallery will only work with it's call and the navbar will not work with the photo gallery's jquery version.
Here is the code for the page! Any help would be great!
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Set objWPC = Server.CreateObject("RealtySearch.RSPublic")
Call objWPC.ListingIsValid(Request.QueryString("LI"))
Set objWPC = Nothing
%>
<!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">
<%
Set objMeta = Server.CreateObject("RealtySearch.RSPublic")
' Process Request Arguments: Command, Template, PageSize, LogoId, AgencyId, CityId, ListingId, FeatureId
strUCCmd = UCase(Request.QueryString("CMD"))
If strUCCmd = "RESDETAIL" Or strUCCmd = "COMDETAIL" Then
Call objMeta.ProcessRequest("ListingMeta")
End If
Set objMeta = Nothing
%>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ILPStyles.css" rel="stylesheet" type="text/css">
<link href="css/RealtySearch.css" rel="stylesheet" type="text/css">
<!-- 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]-->
<style type="text/css">
.container{
width:100%;
margin: auto;
margin-top: none;
position: relative;
}
#media (max-width: 768px) {
.inner-text {
font-size: 10px;
}
.container{
width:100%;
}
}
</style>
<link rel="stylesheet" type="text/css" href="wt-gallery.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-gallery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".container").wtGallery({
num_display:3,
screen_height:360,
padding:10,
thumb_width:75,
thumb_height:56,
thumb_margin:5,
thumbnails_align:"bottom",
text_align:"top",
caption_align:"bottom",
auto_rotate:false,
delay:5000,
rotate_once:false,
auto_center:true,
cont_imgnav:true,
cont_thumbnav:true,
display_play:false,
display_imgnav:true,
display_imgnum:false,
display_timer:false,
display_thumbnav:true,
display_indexes:true,
display_thumbnum:false,
display_tooltip:false,
display_arrow:true,
mouseover_pause:false,
mouseover_text:false,
mouseover_info:true,
mouseover_caption:true,
mouseover_buttons:true,
transition:"fade",
transition_speed:800,
scroll_speed:600,
vert_size:45,
horz_size:45,
vstripe_delay:100,
hstripe_delay:100,
move_one:false,
shuffle:false,
mousewheel_scroll:true
});
}
);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row" id="topbrownbar"> </div>
<div class="row" id="bigpictcont-pages" style="position: relative; min-height: 23em; max-height: 350px; background-image: url(images/pages-header.jpg); background-size: cover;">
<div style="position: absolute; top: -20px; right: 30px; z-index: 4000; color: whitesmoke;">
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></div>
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
<div style="float: right"><h3> 208-217-1776</h3></div>
</div>
<div id="topblackbar"> </div>
<div style="position: absolute; bottom: 10%; z-index: 3000; width: 100%;"><img style="margin: 0 auto;" src="images/ILP-logo.png" class="img-responsive" alt="Placeholder image"></div>
</div>
<div class="row" id="buttoncont">
<div class="col-lg-offset-1 col-lg-12">
<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"><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 class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buck's<br><span style="font-size: 0.7em;">Listings</span></li>
<li class="dropdown">Property<br><span style="font-size: 0.7em;">Search</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Waterfront Lifestyle</li>
<li>Schweitzer Lifestyle</li>
<li>Ranch Lifestyle</li>
<li>Preparedness Lifestyle</li>
<li role="separator" class="divider"></li>
<li>Developments</li>
<li role="separator" class="divider"></li>
<li>Land Listings</li>
<li>Commercial Listings</li>
</ul>
</li>
<li class="dropdown">Visitor's<br><span style="font-size: 0.7em;">Guide</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Inspectors</li>
<li>Surveyors</li>
<li>Planning & Zoning</li>
<li role="separator" class="divider"></li>
<li>Septic & Sewer</li>
<li role="separator" class="divider"></li>
<li>Home Inspectors</li>
</ul>
</li>
<li>Resources</li>
<li>Bio</li>
<li>Contact</li>
<li>Maps</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row" id="mainwoodcont" style="position: relative">
<div class="col-lg-offset-1 col-lg-12 col-md-12 col-md-offset-1">
<h1>Ranch Lifestyle Properties in <strong>North Idaho</strong></h1>
</div>
</div>
<div class="row pagescont">
<div class="col-lg-offset-1 col-lg-12"> </div>
<div class="col-lg-offset-1 col-lg-1"> </div>
<div class="col-lg-10">
<div class="fluid detailpagecont">
<%
Set objApp = Server.CreateObject("RealtySearch.RSPublic")
If len(Request.QueryString("CMD")) = 0 then
Call objApp.ProcessRequest("ResSelect")
Else
Call objApp.ProcessRequest
End If
Set objApp = Nothing
%>
</div>
</div>
<div class="col-lg-1"> </div>
<div class="col-lg-offset-1 col-lg-12"> </div>
</div>
<div class="row" id="footer" style="margin-top: 10px;">
<div class="col-lg-offset-1 col-lg-4 col-md-4 col-sm-6 col-xs-5 col-xs-offset-5 col-md-offset-6 col-sm-offset-5">
<h4>IdahoLifestyleProperty.com</h4>
<p>Buck Graybill REALTOR®<br>
Member of the REALTORS® Land Instatute</p>
<img style="margin: 5px 10px 5px 5px;" align="left" src="images/RLIlogo.jpg" width="60" height="85" alt=""/>
<p> 208-217-1776 <br>
Buck#Sandpoint.com<br>
</p>
<img src="images/footer-hud-logos.png" alt="" width="100" height="32" class="img-responsive"/> </div>
<div class="col-lg-4 col-md-12 col-md-offset-1 col-lg-offset-0" align="center"><img src="images/c21logo-footer.png" width="212" height="132" alt=""/>
<p class="text-center">316 N. 2nd Avenue, Suite A-1 Sandpoint, Idaho 83864 office <br>
(208) 255-2244</p>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-md-offset-1 col-md-6 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-residential-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-land-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-md-offset-1 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-waterfront-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-commercial-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
</div>
</div>
</div>
<div class="row" id="copyright">
<p class="text-center">All Rights Reserved © <script type="text/javascript">document.write((new Date()).getFullYear());</script> IdahoLifestyleProperty.com</p>
</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>
I am trying to delete and restore items in this fashion:
when deleted (by pressing the red 'x') a picture of the item will appear in the navbar,
when the image is clicked in the navbar, the item will be restored onto the page.
As you can see, the last two functions that are currently commented out are what I have been trying to use to implement this functionality, however when I remove the comment '/*' my other javascript functions stop working. Any help would be greatly appreciated.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="jquery-cookie-master"/>
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header>
<h4><mark>Student Project #5 H.B.</mark></h4></br>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand deleted-item hidden" id="box1">
<img class="navpics" src="surface3.jpg" alt="Microsoft Surface">
</a>
<a class="navbar-brand deleted-item hidden" id="box2">
<img class="navpics" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
</a>
<a class="navbar-brand deleted-item hidden" id="box3">
<img class="navpics" src="mabook.jpg" alt="Apple Macbook Pro Retina">
</a>
<a class="navbar-brand deleted-item hidden" id="box4">
<img class="navpics" src="superdrive.jpg" alt="Apple SurperDrive">
</a>
<a class="navbar-brand deleted-item hidden" id="box5">
<img class="navpics" src="case1.jpg" alt="Laptop Case">
</a>
</div>
</div>
</div>
<h2>Premium Computer Supplies!</h2>
</header>
<ul id="sortable" style="list-style-type:none">
<!----------------------------------------------------------------->
<!--<div id="all">-->
<li class="ui-state-default"><div class="row" id="box1">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="a" src="surface3.jpg" alt="Microsoft Surface">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3</h3>
<div class="description" id="pnd1" hidden>
<!--Description and price-->
<div >
<p>With a variety of processors and memory options, there's a Surface for everyone!</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box2">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3 Typer Cover</h3>
<div class="description" id="pnd2" hidden>
<!--Description and price-->
<div>
<p>The Type Cover is a perfect accessory for your Surface!</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box3">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
<!--Accordion heading-->
<h3>Macbook Pro Retina Display</h3>
<div class="description" id="pnd3" hidden>
<!--Description and price-->
<div>
<p>The Macbook is a must-have for students, parents, and more!</p>
<p>Starting at $1299!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box4">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="d" src="superdrive.jpg" alt="Apple SurperDrive">
<!--Accordion heading-->
<h3>Apple SuperDrive</h3>
<div class="description" id="pnd4" hidden>
<!--Description and price-->
<div>
<p>Able to read disks, the SuperDrive is essential for burning music and home-movies!</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box5">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="e" src="case1.jpg" alt="Laptop Case">
<!--Accordion heading-->
<h3>Laptop Case</h3>
<div class="description" id="pnd5" hidden>
<!--Description and price-->
<div>
<p>Carry your computer with you anywhere with a computer bag!</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!----------------------------------------------------------------->
<script>
$( ".row" ).mouseenter(function() {
$(this).animate({
fontSize : '17',
opacity : '0.6',
}, 1);
});
$( ".row" ).mouseleave(function() {
$(this).animate({
fontSize : '14',
opacity : '1',
}, 1);
});
$("div#box1").click(function(){
$("#pnd1").animate({
hidden: 'toggle'
});
});
$("div#box2").click(function(){
$("#pnd2").animate({
hidden: 'toggle'
});
});
$("div#box3").click(function(){
$("#pnd3").animate({
hidden: 'toggle'
});
});
$("div#box4").click(function(){
$("#pnd4").animate({
hidden: 'toggle'
});
});
$("div#box5").click(function(){
$("#pnd5").animate({
hidden: 'toggle'
});
});
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
$('button.close').click(function() {
$(this).parent().animate({
'opacity': 0
}, 1, function() {
$(this).css({'display': 'none'})
})
$(".deletedItem#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
</script>
</body>
CSS:
.bodypics {
width:290px;
height:200px;
}
header{
background-color: royalblue;
color:gold;
padding-left: 0;
width:100%
}
body{
width:90%;
background-color: lightgray;
font-size: 3;
padding-left: 5%
}
.row{
background-color: white;
width:300px;
height:400px;
padding-left: 1px;
border: 1px solid royalblue;
margin: 2px;
}
#all{
width:90%;
}
#sortable li {
height: 402px;
float: left;
}
.close{
color:red;
}
.navpics{
width: 70px;
height: 30px;
}
I have figured it out! Mainly a combination of me being careless and inexperienced, but here's the solution:
Just change this last bit of code:
$('button.close').click(function() {
var name = $(this).parent().attr("id");
$(this).parent().toggleClass("hidden");
$(".deleted-item#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
And now all is dandy!
I m using an online template in which I removed various things to make my own modifications.
There are two pages,
The index page takes a search query as input field and the results page displays the results of on this query.
Everythying is working fine but due to the modifications I did, the results page has title as
"undefined - The search results"
This undefined is supposed to display the input string from index page.
But I want that It should have the title as just "The search results"
What I could do so that it overwrites this title and just has the title I require.
I have tried
document.title = "This is the new page title.";
Under the html head as you can see in script.
But after doing so It displays "undefined - This is the new page title. as title.
I want to remove that undefined.
This is the HTML code for results page, if you can find out whats making the title so.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>The Search results</title>
<meta content="Mamma" name="description"/>
<meta content="Mamma" name="keywords"/>
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
<link media="all" rel="stylesheet" href="/static/results/style.css">
<!-- Thumbnail-->
<link media="all" rel="stylesheet" href="/static/component.css">
<!-- Thumbnail_End-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,600' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="http://mamma.com/static/front/js/jquery-1.8.3.min.js"><\/script>')</script>
<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.main.js"></script>
<!--<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.cookies.2.2.0.min.js"></script>-->
<script type="text/javascript" src="http://mamma.com/static/front/js/scrolltop.js"></script>
<!-- Thumbnail-->
<script type="text/javascript" src="http://mamma.com/static/front/js/modernizr.js"></script>
<!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
<script language="javascript"type="text/javascript">
document.title = "This is the new page title.";
</script>
</head>
<link media="all" rel="stylesheet" href="http://mamma.com/static/front/css/stylemasonry.css">
<script type="text/javascript" src="http://mamma.com/static/front/js/results.js?v=1388742739"></script>
<script type="text/javascript" src="http://mamma.com/static/front/js/common.js"></script>
<!-- Make sure jQuery is loaded. Loads Jquery from Google if not loaded by a plugin. -->
<script type="text/javascript" src="http://mamma.com/static/front/js/jQueryLoader.js"></script>
<!-- SUPERFISH -->
<script type="text/javascript" src="http://mamma.com/static/front/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://mamma.com/static/front/js/superfish.js"></script>
<!-- Flexslider -->
<link media="all" rel="stylesheet" href="http://mamma.com/static/front/css/flexslider.css">
<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.flexslider.js"></script>
<style id="myStyle">
</style>
<!-- wrapper -->
<div id="wrapper">
<div id="static" size="big">
<div id="topspace" style="height: 330px;">
</div>
<!-- header -->
<header id="header" class="vcard">
<!-- logo -->
<style type="text/css">
.result_logo{
background: url(/static/logos_1.png);
background-repeat: no-repeat;
/*height: 12px;*/
background-size : 100% 100%;
float: left;
height: 40px;
max-width: 230px;
width: 230px;
cursor: pointer;
margin: 0px 3.12% 0 0;
}
.result_slogo{
background: url(http://mamma.com/static/front/images/slogo.png);
background-repeat: no-repeat;
background-size : 100%;
cursor: pointer;
height: 42px;
margin: 0 22px 0 15px;
width: 25px;
}
</style>
<div id="logo" class="result_logo"></div>
<div id="logo" class="result_slogo"></div>
<!-- user navigation -->
<nav class="user-nav">
<ul>
<li>help</li>
<li>settings</li>
</ul>
</nav>
<style type="text/css">
.local_text{
flaot:left;
border:1px solid red;
}
</style>
<!-- form search -->
<form id="get_value" action="{% url 'diablo:results' %}" class="form-search" method="get">
{% csrf_token %}
<fieldset>
<input type="text" id="pre_text" name="q" autocomplete="on" value="{{ query }}" class="pre_text">
<!--<input type="text" id="pre_test" name="what" autocomplete="on" value="{{ query }}" class="local_what"
onblur=" if(this.value== '') this.value='What?';" onfocus=" if(this.value=='What?') this.value=''; "
value="What?" style="display: none;" >
<input type="text" id="pre_where" name="where" autocomplete="on" class="local_where"
onblur=" if(this.value== '') this.value='Where?';" onfocus=" if(this.value=='Where?') this.value=''; "
value="" style="display: none;">
-->
<input type="submit" id="search" value="search">
</fieldset>
</form>
<div style="clear:both"></div>
</header>
</div>
<!-- twocolumns -->
<div id="twocolumns">
<!-- aside -->
<div class="aside">
<!-- search areas -->
<!--<div class="search-areas">
<span>Web</span>
<div class="drop">
<strong class="title">Search areas:</strong>
<ul>--><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--
<li class="active"><a class="we" href="javascript:void(0);">Web</a></li>
<li ><a class="we" href="javascript:void(0);">News</a></li>
<li ><a class="we" href="javascript:void(0);">Images</a></li>
<li ><a class="we" href="javascript:void(0);">Videos</a></li>
<li ><a class="we" href="javascript:void(0);">Local</a></li>
</ul>
</div>
</div>-->
</div>
<div class="holder">
<!-- search tabs-->
<!--<div id="prev_next">
<div class="small_screen_prev">
<div id="prev" style="display:none;"> <img src="http://mamma.com/static/front/images/prev_arrow.png" alt="" /></div>
</div>
<div class="search-tabs">
search tabs
<div class="drop"> <strong class="title">Search tabs:</strong>
<div id="tab">
<ul></ul>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="small_screen_next">
<div id="next" style="display:none;"><img src="http://mamma.com/static/front/images/next_arrow.png" alt="" /></div>
</div>
</div>-->
<!-- search content -->
<section class="search-content tab-content" id="mamma_tab_content">
<h2 style="color:#888; font-size: 150%; margin:20px 0 20px 20px; overflow:hidden;float:left">
Meta Search Engine Results
</h2><br>{% load customfilter %}
{% for a in r %}
<div id="org_section_id_20140421181147" class="results-only" style="margin:0 0 0 20px;overflow:hidden;float:left">
<div class="midresult" id="main20140421181147">
<h3>
{{ a.1.title|safe }}
</h3>
<h4>
{{ a.0 }}
</h4>
<p>{{ a.1.desc|safe }}<br/><br/><font size=5 color="green">Google Rank: {{ a.1.GRank|actualRank }} Yahoo Rank: {{ a.1.YRank|actualRank }} Bing Rank: {{ a.1.BRank|actualRank }}</font></p>
</div>
</div>
{% endfor %}
<div class="mamma_tab_content mtabs-1">
</div>
</section>
<div id="searches">
<div class="search-wrap" id="search-wrap">
<section class="search-content tab-content">
</section>
</div>
</div>
</div>
<!--<div style="width: 100%; padding-bottom: 10px; clear: both; height: 100%; display: none;" id="loadmoreajaxloader">
<center><img src="http://mamma.com/static/front/images/ajax-loader.gif"></center>
</div>-->
</div>
</div>
</div>
<script language="javascript"type="text/javascript">
var ispace_txtElements = ['result_text'];
var ispace_brand = '';
</script>
<script type="text/javascript" src="http://mamma.com/static/front/js/ptwidget-1.0.js"></script>
<!-- footer -->
<footer id="footer">
<div class="row">
<span class="copy"><p> Developed By Mohit & Jason </p></span>
<ul class="footer-nav">
<li> About Meta Search Engine</li>
</ul>
</div>
</footer>
<<script>
$('.active').prev().removeClass( "pagenum" );
$('.active').next().removeClass( "pagenum" );
</script>
</body>
</html>
Try this at the bottom of the page
$( document ).ready(function() {
document.title = "This is the new page title."
});
You should use.
document.title = "This is the new page title."
But this is something not SEO compliant.
Please try this
document.title = "Title here"
Try this:
$('title').html($('title').html().replace("undefined -",""));
using javascript:
document.title = document.title.replace("undefined -","")
You need to also ensure that you wrap the code in DOM ready:
$(document).ready(function(){
$('title').html($('title').html().replace("undefined -",""));//or document.title = document.title.replace("undefined -","")
})