I'm working on my first custom Tumblr theme, and the pagination isn't working correctly. I have the links for "Next" and "Previous" set to go to {NextPage} and {PreviousPage} instead of URLs, but they only link right back to the same page they're on instead of going backward or forward. My html looks like this:
{block:Pagination}
<p id="pagination">
{block:PreviousPage}
←
{/block:PreviousPage}
Page {CurrentPage}/{TotalPageCount}
{block:NextPage}
→
{/block:NextPage}
</p>
{/block:Pagination}
CSS:
#pagination {
font-size: 25px;
color: silver;
text-decoration: none;
}
#pagination a {
font-size: 50px;
text-decoration: none;
margin-top: -20px;
}
When I click on the links, they take me to the exact same page I'm clicking from (i.e. if I'm on the homepage, the link is the homepage; if I'm on page 5, they take me to page 5). Does anyone know why they're not linking correctly?
The only thing I see is
{TotalPageCount}
should be
{TotalPages}
Although I don't suspect that would cause prev/next to output current page. Any other html or template tags interfering?
Related
I'm trying to add an "escape button" to a Domestic Abuse help site for an HTML project. I have the button, an image, and it works, but the problem is that you can click outside of the image and it triggers the button. I'm trying to find a way to contain the button activation to inside the picture, not outside of it.
<p id="escape" onclick="myFunction()">
<img src="quickescape.png">
</p>
<script>
function myFunction() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
</script>
Here's a demo of what I'm encountering if it wasn't clear: https://imgur.com/a/5QepBU1
Do I need to use a map id? Any help would be greatly appreciated.
myFunction is activated when clicking where p tag is. If p tag has space then onClick event will be in space too. Giving myFunction event to img tag will not accept activating function on empty space.
<p id="escape" >
<img src="quickescape.png" onclick="myFunction()">
</p>
<script>
function myFunction() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
</script>
Don’t wrap it in a ‘p’ tag (that is a block level element). Wrap it in an inline element, like an ‘a’ or ‘span’.
That is a very good idea. If I were you, I would use this example below so that the website's last url won't show up in the history section.
function quickEscape() {
window.location.replace('https://www.example.com')
}
button {
height: 50px;
width: 100px;
background-image: url('https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/butterfly_16x9_0.jpg?itok=jZ3DYvGK');
background-position: center;
background-size: cover;
color: pink;
font-weight: bold;
font-size: 1.25em;
-webkit-text-stroke: white 1px;
outline: none;
border: pink solid 2px;
border-radius: 10px;
cursor: pointer;
}
<button onclick='quickEscape()'>Quick Escape</button>
I am running the website www.gp2aus.com. When I have updated the foot on the site it shows up perfectly through Dreamweaver when I then click to view in Chrome but when I use Filezilla (FZ) to upload to the server it seems to ignore the pertaining CSS.
So far I have tried:
Updating both the public.html files and another file in FZ
Closing down FZ, reconnecting and resetting FZ to update the CSS file completely
Waiting for half an hour just incase there was some delay in the larger main.css file transferring over (I realise this was just a 'hit & hope'!
Using an online HTML and CSS difference-checker to ensure all of the code created vs uploaded is all the same and these is no difference to any HTML or CSS files
Any ideas what I could consider trying next? I will attach the relevant code below:
HTML
<!-- Footer -->
<span align="right">
<ul class="footer">
<li id="copyright-left">SS Web Designs 2017 All rights reserved.</li>
<li id="copyright-right">Privacy Policy | Disclaimer | Terms & Conditions</li>
</ul>
</span>
CSS
/* Footer */
ul.footer {
cursor: default;
list-style: none;
padding-left: 0;
font-size: 0.9em;
margin-bottom: -3em;
}
ul.footer a {
color: inherit;
}
ul.footer li {
display: inline-block;
padding: 0 1em 0 0;
vertical-align: middle;
}
ul.footer li:last-child {
padding-right: 0;
}
#copyright-left {
float: left;
}
#copyright-right {
float: inherit;
}
Even my JSFiddle seems to come out ok.
https://jsfiddle.net/cyum4cw9/
Hmmmmmmmm...
Thanks for the collective wisdom all!
The CSS could possibly be cached in your browser or server side. Try clearing the cache on your browser by pressing CTRL + SHFT + DEL.
edit:
if the image at https://i.stack.imgur.com/PozxO.png is your desired result, this is how your web page is displayed on my browser.
Here is a screenshot of what is showing up on my webapp right now. It is supposed to be an add button, and the button functionality is there, but for some reason the image itself isn't showing up:
I am not sure if this would be an issue with what I am doing in my HTML or in my CSS, and have never really seen this problem before.
The HTML code relevant to this:
<button md-button class="add-btn" aria-label="add">
<md-icon class="jf-add"></md-icon>
</button>
CSS:
.add-btn {
text-transform: none;
color: #007ab4;
> span {
padding-left: 4px;
vertical-align: sub;
}
}
Did you define the material design in your module?
Example:
angular.module('buttons', ['ngMaterial'])
Also does not look like you defined the src of the icon in your button
Example:
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
I have a webpage with a table. If a user logs in, they can click on the row headers to enter the edit page. To make the printed version look the same for both logged in and not logged in users, I use CSS to style the link as regular text.
The problem is, that the Save as PDF feature in chrome saves the links with their href, making them open a webpage if clicked on in the saved pdf. Is there any way, to remove this href during this 'print', other than the obvious way of having two elements and showing only the clickable one in #media not print and showing only the non clickable one in #media print?
I prefer not using JavaScript to change the href during printing.
You can use pointer-events, see here the browser compatibility for that http://caniuse.com/#search=pointer-events . It will disable your link.
#media print {
a {
pointer-events: none;
color: #000;
text-decoration: none;
}
}
use like this remove anchor tag and put div...like
<style>
#d:active {
load-url: (http://google.com/
}
</style>
<div class="click" id="d" >
</div>
You can use the onclick attribute to open the edit page:
<th onclick="location.href='?edit=ID'">Item #1</th>
To style it as a link, use the th[onclick] CSS selector:
#media not print {
th[onclick], td[onclick] {
color: #00e;
text-decoration: underline;
cursor: pointer;
}
}
i am making a website for my college as a project.To show you i have hosted the same on a free
hosting site. link http://vivace.net23.net/ .Now in the informal section of menu i wanted to put a pop up modal here is the fiddle..http://jsfiddle.net/karn21/73QXx/.
Click Me
<div id="openModal" class="modalDialog">
<div>
X
</div>
</div>
But on click it is not working.Please help me
Instead of setting it as a target, you could set an onclick event for the Click Me button that triggers a JavaScript function to append the id target to the div (or another class). Then, change .modalDialog:target to .modalDialog.target. Then, just remove the class when the close button is clicked.
New Fiddle: http://jsfiddle.net/73QXx/2/
That shouldn't interfere with your hastag scrolling script.
Also, if you still wanted it to appear as a link, you can add this:
CSS:
a {
color: #0645AD;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
a:visited {
color: #663366;
}
EDIT:
This line is only supported by IE11+:
pointer-events: none;
Here is an alternative that you can add using an HTML IF to check if the version is IE10 or less:
pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This may need to be increased depending
on the elements on the page*/
New Fiddle for IE9 (and many other versions including anything that the old version can support): http://jsfiddle.net/73QXx/3/
However, the downside and why this should not be used for anything except IE9 or lower (which is possible with HTML IF) is that the box suddenly appears instead of fading in.