I am having issues with a slider I have on a wordpress site. www.towntalkradio.com
1) The back button is not functioning
2) The code is supposed to call a count of all of the posts in the specified category and display all of those posts. The count is not working correctly and only part of the posts are being displayed (ex. 7 when there are 19 in the category)
I inherited this code and I have very limited experience with this setup. Any suggestions would be greatly appreciated. I apologize if I did not submit this correctly, I am new here.
Javascript
Index.php
The value you are getting is the posts per page setting.
(Settings > Reading > Blog pages show at most)
give this a go on line 9:
<?php query_posts('cat=4&order=DESC&posts_per_page=-1');?>
be sure to use wp_reset_query() after your loop.
query_posts is meant for altering the main loop, WP_Query or get_post
might be better options when running multiple loops.
http://codex.wordpress.org/Function_Reference/query_posts
http://codex.wordpress.org/Class_Reference/WP_Query
Related
First I want to say this is my first question, sorry if it doesn't meet the standards of a quality one (whether it's too messy / badly organized or explained), I'm listening to all kinds of feedback. Also sorry if my english is not perfect, I'll try to be as understandable as possible.
So here is my problem : I'm implementing a React paginator, compatible with server-side content-range pagination. I want to navigate through pages, when there are too much of them.
A basic example without styling available here (EDIT : working, see answer) : https://codesandbox.io/s/w03lkpmy48
(I'm a React rookie, so the quality of my code is probably questionable.)
I created a function calculateNumberOfPages(itemsCount) (l.42) where itemsCount can be a huge number, e.g 7683, to return an int used to create the <li>s.
In the render, I call this function (l.48) to get the number, then I loop on it x times and push <li>s in an array (l.53 to 65).
However, when the itemsCount is huge, that can result in something like this : https://i.imgur.com/zea4QaD.png
which is why I put an ellipsis if the number of pages is above 10 :
https://i.imgur.com/7FstTlO.png
Now, the problem is that I want to navigate through pages, to get next pages (4 by 4). If I click on the 10th page, i should have 10 11 12 13 14 ... 16 (for example), and same when I click on the 10th page, in order to have previous pages.
But I'm logically stuck, and I quite need your help. Some comments in the code might point out what I want to do, but they might be as messy as my logic.
If you have other questions, I'm all ears. Thanks for reading my question !
Okay so I had help from a friend in order to do this.
What was essentially missing in my code was a way to conserve the state of the current page, to compare it. So I added a currentPage property in the state.
Then I added some Javascript (with if/else, needs to be optimized and cleansed) to compare values of the <li>s and the current page.
And I change the values displayed in the render.
You can see all of it in the codesandbox in the question !
I have a popup from Survey Monkey but it pops up straight away. That's not really any use for anyone as research about a user's experience of a website relies on the user having used the website for at least a few minutes.
I want to run this code only on the Nth (let's say 7th) page on that session to the site. So only after a user has delved deeper into a site will they be requested to fill out a survey.
I'm a novice but I know that javascript resets on every pageload/refresh so that on its own seems to be out for using setTimeout.
I was thinking if I could somehow track number of pages using a session then only load the javascript when number of pages viewed = x then it would solve the problems but not really sure where to start?
Any ideas would be greatly appreciated, the script for the popup is below:
(function(t,e,n,s){var c,o,l;t.SMCX=t.SMCX||[],e.getElementById(s)||(c=e.getElementsByTagName(n),o=c[c.length-1],l=e.createElement(n),l.type="text/javascript",l.async=!0,l.id=s,l.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/surveyidnumbergoeshere.js"].join(""),o.parentNode.insertBefore(l,o))})(window,document,"script","smcx-sdk");
Put this code in head of your site:
session_start();
if(!isset($_SESSION['survey_counter'])
$_SESSION['survey_counter']=1;
$showSurvey=false;
if($_SESSION['survey_counter']++ >= 7)
{
$showSurvey=true;
$_SESSION['survey_counter']=0;
}
and this code where you want to echo JS:
if($showSurvey) echo 'YOUR_JAVSCRIPT_CODE';
I'm trying to add to my Tumblr site an additional page that displays all my posts in a random order. Effectively each time this page is loaded or refreshed the posts would be re-ordered randomly. I really want this functionality for my online art and words project as I want people to be able to discover earlier posts in an easy and fun way. I know tumblr already has an inbuilt "/random" feature but this only displays a single post, rather thank randomly ordering all posts. For reference my site is here.
I struggled with some other answers I found on this site as I'm less confident with how exactly to edit and implement changes to my specific themes javascript as opposed to just simply changing the appearance using html and css.
Any help or tips would be much appreciated,
Thanks
Kyle
You could do a cool trick with jQuery where you load a few posts from the "/random" url and then append them to the current page, using .load().
I tried this by going to "/random" on your page and running the following code. Adds five random posts to the current post list.
for (var i = 0; i < 5; i++) {
jQuery('.init-posts').append(jQuery('<div>').load('/random .init-posts article'));
}
You can apply the same logic to a Custom Page you create so long as it has a template like your single post pages.
I've asked this question earlier on which has been technically answered by Bardh Lohaj but unfortunately the answer itself presents a further problem. The question is about a cool way to ajax upload files in a multi field form. The solution would work perfectly except that because the form is using bootstrap.min.css in order to display form sections in JS triggered tabs - meaning the form is nicely broken up into manageable parts while remaining all as one page, means the nice solution offered by Bardh does not function correctly. What is the best way forward to resolve the css/js conflict in order to get both functions to operate fully? I've never had this sort of problem before.
As requested, here is a fiddle of the page, I cannot get the +1 feature seated in Section 3, to work on the fiddle as it does on the real page. Fiddle: http://jsfiddle.net/k3dj214k/2/
I want to get this working in the file upload section (Section 3) of the page on the above fiddle. I've tried several times but always with the same failure - the bootstrap.min.css that is required for the tab function, breaks the file upload function. Advice on how to get them both working together is appreciated.
There is too much code to paste in here, please review jsfiddle link above
The accepted and used solution is not one I'm hugely proud of but it IS functional. Separate the upload form function from the main form so they are two separate pieces of html/php. Break the primary form part way through (close the form) and enter the file upload form as an iframe. After this, re-open the original form.
Not a wonderfully technical solution, but is does work with minimal issues/problems.
i am using turn.js (a script that makes a pape flipping effect) to publish my articles online, but i want to add an index with clickable links that jumps to a specific page
I've searched for my question here and the closest one is
Turn.js more controls to make buttons
The answer was:
$("#magazine").turn("page",4) // goto page number 4
Reference: http://www.turnjs.com/#samples/docs/18
Well i don't know where to put it and make it an action for a clickable link
sorry for the novice question i'm a graphics designer and a poet but i'm totally new to javascript coding
Thanks for your time
I don't know turn.js but you can try making a link which calls javascript as follows :
Index term
Make your index a list of such links setting appropriate values for the page number and index term. A quick scan of the documentation showed no reason why this would not work.