So, basically, I'm working on my first Tumblr theme here: teenaqe-vow.tumblr.com and everything is fine and dandy so far EXCEPT for the infinite scroll code. What happens is it works perfectly fine until you go to a tagged page like this one. http://teenaqe-vow.tumblr.com/tagged/music What happens is that when you scroll down, instead of loading the next page of the tagged pages, it loads a page from the index page. I'm using a script that keeps the posts all nestled together and renders the infinite scroll and without it there are gaps in the posts and it doesn't work out too well.
I'm really new with this whole thing so I'm kind of at a loss of how to fix it. I apologize if any of the information I provide is inadequate, please let me know if you need something more from me.
Here is the entire theme code: http://pastebin.com/X8DaLKPG
Here is the infinite scroll / masonry part:
{block:IndexPage}{block:IfTwoColumn}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
{block:IfInfiniteScroll}
<div id="pagination"></div>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
});
});
$container.infinitescroll({
itemSelector : "#entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "http://media.tumblr.com/ec1742dbca16ca94b47814f1de4e37e6/tumblr_inline_mj8pf7Te3l1qz4rgp.png",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IfTwoColumn}{/block:IndexPage}
Your pagination link is fixed on the main page (it always points to user.tumblr.com/page/2/). Use the Tumblr API pagination tools instead.
I have been having this same issue on my Tumblr and have finally resolved it, so I thought that I would share my mistake and my resolution in the hopes that it will help a fellow beginner, such as myself :)
This is what I had to start with that was causing the issue:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" href="/page/2" id="next"></a></div>
And this is my resolution:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" {block:NextPage}href={NextPage} id="next" {/block:NextPage}></a></div>
You'll notice that the only change has been made to the href attribute. When you set it to /page/2, it's telling the tag page to show page 2 from the index page, because it is missing the name of the tag from the URL. When you add Tumblr's pagination block tag for next page ({block:NextPage}) and the next page URL ({NextPage}), it will then be able to decipher whether or not you are starting from an index page or a tag page, and then be able to fill in the blanks in the URL by itself. I hope this helps!
Related
Using Html2canvas, jsPdf, and angularjs to take a screen shot of a portion of my webpage to show as a pdf preview. I was able to successfully export the content to the pdf, but it only shows half of the content. What can I do to fix this?
Here is the button that creates the pdf. (rollup.html)
<button ng-click="genPDF()">PDF Test</button>
Within the controller, I used the html2canvas function (rollup.js)
Here I believe 'document.body.appendChild' may be the key because when it is uncommented it shows another copy of the table within the webpage when 'pdfTest' is click, as well as within the pdf preview, but only half of the content.
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
.....
$scope.genPDF = function(){
html2canvas(document.getElementById("testDiv"), {
onrendered: function (canvas) {
//document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',10,10);
doc.save('test.pdf');
//IE 9-11 WORK AROUND
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
},
//width: 300,
//height: 300
});
}
});
Of course within the html page where the table is created, I have an id of testDiv within the div to the content I want appearing in the pdf.(route.html)
<div class="row" id="testDiv">
....all the table content
</div>
How can I fit the full content to the pdf preview without it cutting off? Any help is greatly appreciated.
Found a solution where I add parameters to the doc.addImage.
doc.addImage(img, 'JPEG',10,10,190,200);
I am not sure how to make the image 100 % of the pdf page, but with this I can set parameters that work best for the table atleast. Hopefully I can find a better solution, but this works for now.
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
I've checked other posts on here, no results of what I'm looking for.
I want to click on
About
<div id="about">Content of this..</div>
and have it scroll to that element without putting www.domain.com/#about in the address bar
As a perfect example please check out this site that I found here and click on some of the links --they don't change the address bar when clicked.
You can do what you want using javascript and jquery, example below (note that this is using an old version of jquery):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
});
});
</script>
</head>
<body>
<a class="scroll" href="#codeword">Blue Words</a>
<div id="codeword"></div>
</body>
</html>
Played around with this myself and here is a summary of my learnings on the subject.
Here's the basic link command:
Blue Words
Here's how you denote where the jump will scroll the page:
<A NAME="codeword">
Here's what's happening
The A HREF command is the same as a basic link except the link is to a codeword rather than a URL.
PLEASE NOTICE there is a # sign in front of the codeword. You need that to denote it is an internal link. Without the # sign, the browser looks for something outside the page named after your codeword.
Your "codeword" can be just about anything you want. I try my best to keep it short and make it denote what it is jumping to. There might be a limit to the number of letters you can use--but I haven't found it yet.
The point where the page will jump follows the same general format except you will replace the word HREF with the word NAME.
PLEASE NOTICE there is no # sign in the NAME command.
Note! Where you place the NAME target will appear at the top of the screen browser.
Hope it helps.
window.location.hash = ""
is the possible way I could find.
hash gives the string next to #.
//dont use a, use class
$(document).ready(function(){
$(".mouse").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes
to scroll to the specified area
$('html, body').animate({
scrollTop: $("#section").offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = "";
});
} // End if }); });
One possible workaround is to use a <button> instead of a <a>.
So rather than....
About
<div id="about">Content of this..</div>
...you can change it to
<button href="#about">About</button>
<div id="about">Content of this..</div>
This way the anchor link will not affect the URL.
For me, only inserting "return false;" solved this issue.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" async></script>
<script>
jQuery(document).ready(function($) {
$('a[href^=#]:not(a[href=#])').click(function() {
$('html, body').animate({scrollTop: $(this.hash).offset().top}, 1300, 'easeInOutExpo');
return false;
});
});
</script>
(This applies to all anchor links on the page.)
I tried to monitor window.location.hash using a MutationObserver, but that doesn't work, see How to use (or is it possible) MutationObserver to monitor window.location.pathname change?
So now I'm using the window.onpopstate() eventListener:
var flag_onpopstate=false; // use this global flag to prevent recursion
window.onpopstate = () => {
if (flag_onpopstate) return;
flag_onpopstate = true;
window.location.hash = "";
flag_onpopstate = false;
}
A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.
I Have Been working on a page the using a jquery autocomplete so that while your typing in a clients name its searching the databases for any macth containing that phrase. so using "LIKE" .
i have also put together a jquery silder so that it displays the records that are automaticly loaded from the database and when u click on one it will load more inofmation from the database..
indivaully thesse 2 pieces of code work fine so the jquery autocomplete on a serprate page just loading text enterys from a database.
and the jquery slider works fine with manually entered data and data loaded by php from a database..
but when i put them together the problem is it shows the record on the screen with the styling from the jquery slider but when u click the record it doesnt show anything so no slider (atm just manual html data in the slider for testing)
i have tried multipule tests such as running them serpeatre, placing them in different div tags. i have got it to work with a single sql query but it isnt what i need to do because i dont want the page to need to be refreshed for loading data.
i have placed my code from both files so th is first one is what calls the ajax request to create the records..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".recordrow").click(function() {
var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
$("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
});
$('#bt-close').click(function(){
$('.details').animate({right:-2000}, 500);
});
});
function getStates(value){
$.post("sql.php",{partialState:value},function(data){
$("#results").html(data);
});
}
</script>
<input type="text" onkeyup="getStates(this.value)"/>
<br />
<div id="results">
</div>
And this is the page which querys the database
<?php
if($_POST['partialState']){
mysql_connect("localhost","root")or die (mysql_error());
mysql_select_db("ict_devices") or die (mysql_error());
$test=$_POST['partialState'];
$text="... More details of the records";
$states = mysql_query("Select * from students Where FirstName LIKE '%$test%'");
while($state= mysql_fetch_array($states)){
echo '<div class="recordrow" id="row-$state["id"]">'.$state['FirstName'].'</div>';
echo '<div class="details" id="details-$state["id"]">'.$text.'Close</div>';
}
}
?>
any help would be greatly appricated
I think you need to bind a click function on "recordrow" div after you got it by ajax. In your code there are no "recordrows" on the moment a click event binds. So you need something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function getStates(value){
$.post("sql.php", function(data){
$("#results").html(data);
$('.recordrow').each(function() {
$(this).bind('click', function() {
var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
$("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
});
});
$('#bt-close').each(function() {
$(this).bind('click', function(){
$('.details').animate({right:-2000}, 500);
});
});
});
}
</script>
Your ajax is right and when you test slider recordrows already in DOM, click binds correcly. That is why it works by parts
EDIT: I test my code and add binding of bt-close event, it works for me, try it. It shows details when clicked and animation launches
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.