I'm trying to remove the counter from the google +1 button, but am getting this result:
there is no attribute "g:plusone:count"
Here is the code:
<div id="add" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php">
<img src="/images/add.jpg" width="32" height="32" alt="Share" /></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_google_plusone" g:plusone:count="false"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d766a8d31dffc91"></script>
<script type="text/javascript">
var addthis_config = {
services_exclude: 'print'
}
</script>
Anyone know how I can keep the counter off and still validate in xhtml strict?
Related
I am converting div element to image or screenshot. I've search throughout the internet and found out about html2canvas. I tried using it but no luck. Is there anyone who knows how to make it work? Here is my source code.
<html>
<head>
<title> Screenshot </title>
</head>
<body>
<div id="container">
<h1> Screen shot me </h1>
</div>
<button onclick = "screenshot()"> Capture </button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function screenshot(){
html2canvas(document.getElementById('container')).then(function(canvas){
document.body.appendChild(canvas);
})
}
</script>
</html>
My error keeps saying
Uncaught TypeError: html2canvas(...).then is not a function
at screenshot
at HTMLButtonElement.onclick. Did I miss something?
Im using Laravel 5.6 with NPM. Thankyou in advance!
Tested Chrome, Firefox ok, IE 11 needs adding 2 extra js library to support promise.
function takeSnapShot() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
document.querySelector("#newCanvas").appendChild(canvas);
});
}
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; "> Screen shot me </h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<div id="newCanvas"></div>
</html>
I'm developing a multi page application in Spring and ReactJS without using NodeJS.
index.html:
<body>
<div class='container'>
<div id='root'>test</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-bootstrap/0.24.4/ReactRouterBootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>
<script type="text/babel" src="/public/navigation.js"></script>
<script type="text/babel" src="/public/test.js"></script>
</body>
test.js:
ReactDOM.render(<div><TestNavigation /></div>, document.getElementById('root') );
navigation.js
var Navbar = ReactBootstrap.Navbar,
Nav = ReactBootstrap.Nav,
NavItem = ReactBootstrap.NavItem;
var LinkContainer = ReactRouterBootstrap.LinkContainer;
class TestNavigation extends React.Component {
navItemHandleClick() {
console.log("NavItem Clicked")
}
render() {
return (
<div className="col-md-12">
<Navbar id="navbar"collapseOnSelect>
<Navbar.Collapse>
<Nav >
<NavItem eventKey={1} href="#" >Page 1</NavItem>
<NavItem eventKey={2} href="#" className="navLink" onClick={this.navItemHandleClick}>Page 2</NavItem>
<NavItem eventKey={3} href="#" className="navLink" >Page 3</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
I'm not able to have link inside NavItem. I don't want to use nodejs, so import statement in js file will not work. Please help. Thanks.
You can use <Navbar.Link> to get nav-link inside your NavItem like below
<NavItem eventKey={1} href="#">
<Navbar.Link>Page 1</Navbar.Link>
</NavItem>
The below code worked. Thanks
<NavItem eventKey={1} ><Link className="navLink" to="/" id="navcolor">Home</Link></NavItem>
I am having trouble creating a drop down that can sort my search results, any help is welcome. I have tried a couple of different methods that I have found from the internet but so far none have worked (I have no doubt in my mind that it is user error as others seem to have had success using those methods.) I apologise in advance for my being new at coding.
I have put my new code into this post if you could assess it and explain to me why it is not working I would be eternally grateful to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jenewan Pets</title>
<link rel="icon" type="image/gif/png" href="img/Logo.png"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap 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">
</head>
<body>
<body background="img/bckgrnd.png">
<div id="container">
<div id="header">
<img src="img/Header.png" style="position: absolute; top: 0px;"/>
<h1>
<img src="img/logo.png" alt="logo" height="100px" width="100px" border="0px" style=position:relative; />
<div class="box">
<div class="container-1">
<form method="get" action="searchresults11.php" id="searchForm">
<input type="text" id="searchBox" name="q" placeholder="Let's Sniff it Out...">
<div class="search-icon">
<img class="search-icon" img src="img/PawSearch.png" width="18" height="18" alt="search icon" />
</div>
</div>
</div>
</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href="/index.php">Home</a></li>
<li>Dogs</li>
<li>Cats</li>
<li>Birds</li>
<li>Reptiles/Exotic</li>
<li>Aquatics</li>
</ul>
</div>
<div id="Results">
<h2>We sniffed and we found...</h2>
<?php
$con=mysqli_connect("localhost","root","","catalog");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if(isset($_GET['q'])){
$searchq = $_GET['q'];
}
$q = mysqli_query($con,"SELECT * FROM final_dog_catologue_full where
keywords LIKE '%$searchq%' OR brand LIKE '%$searchq%' OR name LIKE '%$searchq%' LIMIT 0, 40") or
die(mysqli_error("Sorry we lost the scent..."));
echo "<table border='2'>
<tr>
<th> </th>
<th id='Name_Header'>Item Name</th>
<th>Brand</th>
<th id='Price_Header'>Price</th>
</tr>";
while($row = mysqli_fetch_array($q))
{
echo "<tr>";
echo "<td><img src='img/".$row['Picture']."'></td>";
echo "<td headers='Name_Header'>" . $row['Name'] . "</td>";
echo "<td headers='Brand'>" . $row['Brand'] . "</td>";
echo "<td headers='Price_Header'>£" . $row['Retail_Price_With_Delievery'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
<script type="text/javascript">
var table = $('table');
$('#Name_Header, #Price_Header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
</script>
</div>
</div>
<div id="footer">
Copyright © 2017 Jenewan Pets
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<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>
</body>
</html>
Does anyone know of a jquery plugin that has a background slide show and a gallery that changes background images every time someone opens the site or every hour or so?
There are lot of jQuery slideshow plugins. I would recommend you to look at the following:
Slide JS - http://www.slidesjs.com/
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body>
Also, check some good slideshow plugins here
I am trying to implement photoswipe inside my jquerymobile application.
I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages.
Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.
On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts)
I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages.
So I need to know how to setup the code for photoswipe before page load.
The code below is from the itemPage level( I put the code from the photoswipe demo inside)
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script>
</head>
<body>
<div data-role="page" id="Home">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
</ul>
<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>
<ul data-role="listview" data-inset="true">
<li>Code Computerlove</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<ul class="gallery">
<li><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
</div>
</body>
</html>
I put the script to handle the gallery inside <div data-role="page" id="Home">
since If I put the code in the head is never executed for the ajax call.
However when I executed the code above, the page doesn't show the last level(itempage never appears)
I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <div data-role="page" id="Home">
$( document ).delegate("#Home", "pagebeforecreate", function() {
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
but how I can call the photoswipe script, If I replaced the code from alert function with
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
it doesn't work? the page doesn't load
Hope you can help me!
Thanks
You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.
I'm using this, which also ensures you can call more than one photoswipe-gallery on a multipage and also allows different HTML containers for the images. Feel free to modifiy to your need:
(function (window, $, PhotoSwipe) {
// still using live for photoswipe vs. on()/off()
$('div:jqmData(role="page")').live('pageshow', function (e) {
var currentPage = $(e.target),
options = {},
// allow multiple galleries
swipesOnPage = currentPage.find('.photoswipeable');
// no photoswipe, we're done
if (swipesOnPage.length == 0) {
return false;
}
// if there are swipes init each
swipesOnPage.each(function (i) {
// make sure swipe is initialized once in case events bubble
if ($(this).data('photoswipe') != 'init') {
$(this).data('photoswipe', 'init');
// init - make sure you add a class of swipeMe to your images!!
var photoSwipeInstance = $(this).find(":not('.cloned') a.swipeMe", e.target).photoSwipe(options, currentPage.attr('id'));
}
return true;
});
// un-init when leaving the page
}).live('pagehide', function (e) {
var currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
}(window, window.jQuery, window.Code.PhotoSwipe));
Add data-ajax="false" to the page calling the sub pages.
Similarly, add to index.html to link to portfolio.html.
If you have a slide show on home page add to link on portfolio.html for index.html as well.