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 -","")
})
Related
Can't get ng-click="speakOut()" to work, it is not calling speakOut function, however ng-click="getCalories()" works perfectly. Any ideas what am I doing wrong?
angular.module('watson', ['ngSanitize'])
.controller('textcntr', function($scope, $http) {
$scope.speakOut = function() {
$scope.text = document.getElementById("speak").value;
$http.get('https://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?username=xxx&password=xxx=Your search term').success(function(data) {
console.log(data);
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ICP 3</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="application/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo">ICP 3</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/1.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="slider-text-inner">
<h1>Find out calories and serving weight in grams</h1>
<div ng-app="food" ng-controller="foodctrl">
<p><button class="btn btn-primary btn-demo" href="#" ng-click="getCalories()"></i> Search</button></p>
<form style="font-size: large;font-family: Chalkduster">
<input style="font-size: large" type="text" name="food" id="calories" placeholder="Search">
</form>
<p class="currentConditions" ng-bind-html="outputCalories.html" style="font-size: 20px; color: black; font-family: Chalkduster"> </p>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/2.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner">
<h1>App can speak out the searched keyword</h1>
<!--<h2>Free html5 templates Made by freehtml5.co</h2>-->
<div ng-app="watson" ng-controller="textcntr">
<p><button class="btn btn-primary btn-demo" href="#" ng-click="speakOut()"></i> Speak Out</button></p>
<form style="font-size: large;font-family: Chalkduster">
<input style="font-size: large" type="text" name="textToSpeach" id="speak" placeholder="Speack out">
</form>
<p class="currentConditions" ng-bind-html="currentweather.html"></p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div class="gototop js-top">
<i class="icon-arrow-up2"></i>
</div>
<script src="js/watson.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</div>
</div>
</body>
</html>
angular.module('food', ['ngSanitize'])
.controller('foodctrl', function($scope, $http) {
$scope.getCalories = function() {
$scope.foodName = document.getElementById("calories").value;
//$scope.stateCode = document.getElementById("CodeId").value;
// abbrState(stateCode, 'name');
$http.get('https://api.nutritionix.com/v1_1/search/' + $scope.foodName + '?results=0:1&fields=*&appId=xxx&appKey=xxx').success(function(data) {
console.log(data);
calories = data.hits[0].fields.nf_calories;
weight = data.hits[0].fields.nf_serving_weight_grams;
$scope.outputCalories = {
html: "Result: " + $scope.foodName + ' contains: ' + calories + ' calories and serving weight in grams is: ' + weight + '.'
}
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
}
});
This question already has answers here:
how to select all class except the clicked element in JQuery?
(3 answers)
Closed 5 years ago.
This code removes the div that is selected, i was trying to when i click in the button that is in the div,all the other would disapear, and the one that i clicked stayed, but i only can remove the one that i click, sry for my english and sry for being a beginner at jquery.
I have here a video to youtube to show you better what is my problem https://www.youtube.com/watch?v=kiUECo33-d0
$('.product-removal button').click( function() {
removeItem(this);
});
function removeItem(removeButton)
{
var productRow = $(removeButton).parent().parent();
productRow.remove();
}
<html>
<head>
<title>Configurador</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ResponsiveAccordianMenu.css" rel="stylesheet" type="text/css">
<link href="css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="twd_container">
<h1 style="margin:150px auto 30px auto; text-align:center">Configurar</h1>
<!--Processador-->
<div id="AL" class="expandContent">
<h3 class="header">
<div class="headerColumn1">Processador</div>
<div class="headerColumn2 expand"><img src="img/plus.png" /></div>
<div class="expandedContentClearFloat"></div>
</h3>
<div class="expandedContent">
<div class="container">
<ul id="orders">
{% for item in processador %}
<div class="product-removal">
<li>
<div class="row carousel-row" >
<div class="col-xs-8 col-xs-offset-2 slide-row" id="container">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="iconcomp" src="{{ item.img|e }}" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>{{ item.marca|e }}</h4>
<p>
{{ item.descr|e }}
</p>
</div>
<div class="slide-cima" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw fa-undo"></i></button>
</span>
</div>
<div class="slide-footer" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button name="" class="btn1" id='item' value='{{ item.id|e }}' ><i class="fa fa-fw fa-shopping-cart"></i></button>
</span>
<button class="remove-product">
Remove
</button>
</div>
</div>
</div>
</li>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<!-- scripts-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/ResponsiveAccordianMenu.js"></script>
</body>
</html>
use this this hides all div except one you click
$('div').click(function(){
$('div').not(this).hide();
});
provide selector as per your's
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>
So i am trying to export a specific div to a PDF file and i am failing miserably...
This is the page:
<!DOCTYPE HTML>
<html>
<head>
<title>Testpage</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="../assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="../assets/css/jquery.dataTable.min.css" />
<link rel="stylesheet" href="../assets/css/main.css" />
<link rel="stylesheet" href="../assets/css/toastr.css" />
<link rel="stylesheet" href="../assets/css/chart.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="../assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="../assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner" id="inner">
<!-- Header -->
<header id="header">
<h2><strong>Test</strong></h2>
</header>
<!-- Content -->
<section>
<!-- Table -->
<h3>Table</h3>
<div class="table-wrapper">
<table id="myTable">
<thead>
<tr>
<th>Time</th>
<th>Speed</th>
<th>Meters</th>
</tr>
</thead>
<tbody>
<?php
require_once ('showData.php');
?>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menü -->
<nav id="menu">
<header class="major">
<h2>Menü</h2>
</header>
<ul>
<li>Home</li>
<li>
<span class="opener">Test</span>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</li>
</ul>
</nav>
<!-- Filter -->
<section>
<header class="major">
<h2>Filter</h2>
</header>
<form method="post" id="submitdata" name="submitdata">
<div class="row uniform">
<div class="12u 12u$">
<input type="text" name="datefrom" id="datefrom" value="" placeholder="Date from" />
</div>
<div class="12u 12u$">
<input type="text" name="dateto" id="dateto" value="" placeholder="Date to" />
</div>
<div class="12u$">
<div class="select-wrapper">
<select name="dropdown" id="dropdown">
<option value="0">- Choose -</option>
<option value="1">All</option>
<option value="2">Speed</option>
<option value="3">Meter</option>
</select>
</div>
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" id="btnSubmit" value="Clickme" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
<!-- Exportmenü -->
<section>
<header class="major">
<h2>Export</h2>
</header>
<div class="12u 12u$">
<button id="btnExport" class="button special icon fa-file-pdf-o">Export as PDF</button>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p> Stuff </p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/jquery.dataTables.min.js"></script>
<!--[if lte IE 8]><script src="../assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../assets/js/main.js"></script>
<script src="../assets/js/toastr.js"></script>
<script src="../assets/js/submitData.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</body>
</html>
I am trying to get everything in <div class="inner" id="inner"> into an PDF-File but nothing seems to work. I tried with jsPDF and html2canvas (html -> img -> pdf) but the quality is VERY bad. Nothing else seems to work.
I would appreciate some pointers like what i can use to get it working.
Thank you very much,
Skar
EDIT:
This is what i included after the jsPDF recommendation
<script src="../assets/jsPDF/jspdf.debug.js"></script>
<script src="../assets/jsPDF/examples/js/html2canvas.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#header': function(element, renderer){
return true;
}
};
$('#btnExport').click(function(){
var html=$("#inner").html();
doc.fromHTML(html,0,0, {
'width': 500,
'elementHandlers': specialElementHandlers
});
doc.save("Test.pdf");
});
</script>
Try this library, it is built for client side PDF generation.
https://parall.ax/products/jspdf
Here is the github link
i found html5 game (one player with computer) in a site and convert it to 2 player.this is my summarized code:
<html>
<head><title></title></head>
<body onload="javascript: paintBoard();">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"
</canvas>
<script>
.... //my html5 game logic is written in here that works correctly
</script>
</script>
</body>
</html>
when i run browser to see my (this file name is tictactoe.html)code in browser no problem to see the game but when i put this code to another page that has template i can't see anything.that page name is play.php and like this :
<!DOCTYPE HTML>
<html>
<head>
<title>world Game Center </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/light.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
<script type="text/javascript" src="js/tictactoe.js"></script> //this is the game logic that i suggest above.
</head>
<body >
<div id="main">
<!-- begin header -->
<header>
<nav>
<ul class="sf-menu" id="nav">
<li>home</li>
</ul>
</nav>
<div id="logo"><h1>game center onlineworld</h1></div>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<center>
<form id="name_form">
<h1>chat</h1>
<!-- <input type=text id="name_input"
style="width: 200px; margin: 2px" disabled>
<input type="submit" id="connect_button" value="Connect"
style="width: 70px; margin: 2px" disabled>
</form>
-->
<textarea id="chat_box" readonly="readonly"
style="width: 400px; height: 400px;
margin: 2px; resize: none"></textarea>
</textarea>
<form id="message_form">
<input type=text id="message_input"
style="width: 220px; height: 18px; margin: 2px" disabled>
<input type="submit" id="send_button" value="Send"
style="width: 60px; margin: 2px" disabled>
</form>
</center>
</div>
<div id="right_content">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"></canvas>
</div>
</div>
<!-- end content -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>