Creating a Blog Post with Pagination on Blogger

After creating pagination for 1 to 10 posts, I encountered an issue where clicking on page 1 or 2 does not show as the visited or active page. Any advice on how to fix this?

Below is the CSS code:

.post-pagination {
    margin: 100px auto;
    text-align: center;
    width: 100%;
    float:left;
}
.button_1, .button_2, .button_3, .button_4, .button_5, .button_6, .button_7, .button_8, .button_9, .button_10 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 5px 40px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover, .button_4:hover, .button_5:hover, .button_6:hover, .button_7:hover, .button_8:hover, .button_9:hover, .button_10:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
.post-pagination a {
    color:#4876ff;
    float: left;
    position:relative;
    left: 7%;
    list-style:none;
    margin: 0.5px;
}

Here is the jQuery code:

<script style='text/javascript'>
jQuery(document).ready(function(){
jQuery(&#39;.button_1&#39;).click(function(){
jQuery(&#39;.content_1&#39;).show();
jQuery(&#39;.content_2&#39;).hide();
jQuery(&#39;.content_3&#39;).hide();
jQuery(&#39;.content_4&#39;).hide();
jQuery(&#39;.content_5&#39;).hide();
jQuery(&#39;.content_6&#39;).hide();
jQuery(&#39;.content_7&#39;).hide();
jQuery(&#39;.content_8&#39;).hide();
jQuery(&#39;.content_9&#39;).hide();
jQuery(&#39;.content_10&#39;).hide();
return true;
});
jquerycsspaginationblogger

Answer №1

After implementing the code below, I was able to resolve the issue. I decided to update my answer so that other users can benefit from it :)

Below - <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


Above: 
    ]]></b:skin>

<!-- Pagination Script -->
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.post-pagination a {
    color:#f4655f;
    float: left;
    position:relative;
    left: 7%;
    list-style:none;
    margin: 0.5px;
}
.button_1, .button_2, .button_3, .button_4, .button_5, .button_6, .button_7, .button_8, .button_9, .button_10 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 5px 40px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover, .button_4:hover, .button_5:hover, .button_6:hover, .button_7:hover, .button_8:hover, .button_9:hover, .button_10:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
<!-- Pagination Script End Here -->


Above: </head  

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery('.content_4').fadeOut('fast');
jQuery('.content_5').fadeOut('fast');
jQuery('.content_6').fadeOut('fast');
jQuery('.content_7').fadeOut('fast');
jQuery('.content_8').fadeOut('fast');
jQuery('.content_9').fadeOut('fast');
jQuery('.content_10').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
jQuery('.button_4').css('background','#fff');
jQuery('.button_4').css('color','#F4655F');
jQuery('.button_5').css('background','#fff');
jQuery('.button_5').css('color','#F4655F');
jQuery('.button_6').css('background','#fff');
jQuery('.button_6').css('color','#F4655F');... and so on

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected issue with AJAX call: browser error caused by prolonged script execution

I'm encountering an issue with my ajax call where the browser throws a "not responding due to a long-script is running" message and provides a button to stop the script. Although the URL is being fetched correctly, the console.log(4) within the succe ...

javascriptjqueryajax

Preventing access to the direct Thank You page: Steps using HTML, Javascript, and AJAX

There is a specific requirement: I need to prevent users from accessing the Thank You page directly. If a user tries to access the Thank You page directly, they should be redirected back to the Registration page. The solution cannot be cookie-based or .ht ...

javascripthtmlcssajax

Issue with Bootstrap card "sub-components" such as card-heading not functioning

I'm facing an issue while trying to integrate BlazorStrap into an existing .NET6 Blazor web assembly app. It seems like there is a problem with Bootstrap that needs to be resolved before I can get BlazorStrap to function properly. Let's focus on ...

cssblazorbootstrap-5blazor-webassemblyblazorstrap

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

Is there a way to smoothly change the target position or attributes of a running transition without halting it? To illustrate, let's consider this initial animation: -webkit-transition:-webkit-transform 5s ease-in-out -webkit-transform: translate3d( ...

javascripthtmlcsswebkit

Nginx does not serve Django's CSS files as default

After deploying my Django app on a VPS with Nginx and configuring Nginx to handle the static files, I'm encountering a strange issue. While all the images are rendering properly, the CSS doesn't seem to be working at all... Here is my Django set ...

htmlcssdjangonginxstatic

Automatically update the image based on each step

Here are the steps I need to follow: <li>Step1</li> <li>Step2</li> <li>Step3</li> <li>Step4</li> <li>Step5</li> For each step, I want to display a related image. Here's how I envision it: ...

jquery

Switching the image by clicking on the link

Looking for assistance with a code that displays three button images and fades in the relevant div when clicked using jQuery... http://jsfiddle.net/ttj9J/11/ HTML <a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/u1SbuRE ...

jqueryhtmlcss

Issues with jQuery TinySort

I have been working on a script that incorporates the jQuery TinySort Extension to organize divs based on a dropdown selection. Unfortunately, I am encountering issues as it doesn't seem to be functioning correctly. Here is the JavaScript code snipp ...

jquery

Retrieve the computed style of a cloned element that has not yet been appended to the document

I am dealing with an HTML page that looks like this: <div id="cloneDiv"> <h1> <a href="">ASUS Vivotab Smart Black Office 2013 H&S ME400C-C2-BK 10.1-Inch 64GB Tablet (Black)</a> </h1> <di ...

javascriptjqueryhtmlcssclone

Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

My stack includes nextjs13, chakra-ui, and vanilla-extract Seeking guidance on how to update both icon and text within a button upon hover, utilizing chakra-ui and vanilla-extract. The current setup of my button is as follows: <Button > <svg wi ...

cssreactjsnext.jschakra-uivanilla-extract

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

javascripthtmljquerycssslick.js

JavaScript not functioning properly with 'required' validation

pushData = []; //+ button when clicked function myFunction() { var custOfficeId = document.getElementById('customOfficeId').value; var custOfficeName = $("#customOfficeId option:selected").text(); var fromDate = document.getElementByI ...

javascriptjqueryhtml

Creating vibrant row displays in Vue.js: A guide to styling each row uniquely

I am not a front-end developer, so Vue and JS are new concepts for me. Currently, I am working on an application for managing sales. One of the components in my project involves displaying invoices in a list format. To make the rows visually appealing, I ...

javascripthtmlcssvue.js

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

Choosing from Select2 and Bootstrap: displaying chosen elements beyond the placeholder

I'm currently working on setting up a Select2 Placeholder with multiple options in a Bootstrap template. The issue I'm facing is that when I select all the options, they extend beyond the placeholder boundaries. Here's how it looks: https: ...

htmljquerybootstrap-4jquery-select2

The Datatables::of() function consistently returns an empty "data" array on all paginated pages except for the initial one

When using DB::table() to retrieve data for datatables, I then pass the received Collection to return Datatables::of(). For debugging purposes, I am currently retrieving the first 10 rows statically by using ->skip(0)->take(10)->get(); with each r ...

jsonajaxlaraveldatatablespagination

Switch the video source using JavaScript

I've been experimenting with creating a custom dropdown (ul li list) that allows users to select a different video to play, which is then loaded into the background of the page. Once the user clicks on the dropdown, it should switch to a different vi ...

jqueryhtmlvideo

What is the best way to retrieve all dates that are older than 30 days using JavaScript?

I have the following code snippet as a reference and I'm attempting to retrieve a list of dates from 30 days before. What do I need to change? Date.prototype.addDays = function(days) { var newDate = new Date(this.valueOf()) newDate.s ...

javascriptjquery

Is there a way to ensure the website's menu bar remains on a single line?

I'm currently working on a website and running into an issue with the menu bar. Everything looks perfect, but on larger screens or Android devices, the "Contact Us" menu item sometimes jumps to a new line unexpectedly. If you visit the webpage and tr ...

css

Issue with replacing css in Laravel using JavaScript on non-base routes

A JavaScript function has been implemented to create a theme changer toggle switch, which switches between two different .css files - one for dark theme and the other for white theme. The theme switcher successfully works on base routes like "./routes", ho ...

javascriptcsslaravellaravel-routing