The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

After successfully creating a password redirect page where entering the correct password redirects you to another URL (psswrdtest.tumblr.com with the password as correctpsswrd, redirecting to google.com*), I attempted to improve it by making the password page fade in to reveal the blog if the correct password is entered. Despite inserting my password code into the theme and using jQuery, it still doesn't work! Here is my latest attempt.

Here is the CSS:

#hamuko {
    position:fixed;
    display:table;
    width:100%;
    height:100%;
    background:{color:background}
    url('{image:background}') left bottom repeat;
    {block:iflittlecursor} cursor: url(http://i.imgur.com/ZOrzC.png), auto; {/block:iflittlecursor}
    z-index:2147483647;
    top:0;
}

#hamuko #aki {
    display:table-cell;
    font-size:16px;
    vertical-align:middle;
    text-align:center;
    {block:iflittlecursor}cursor: url(http://i.imgur.com/ZOrzC.png), auto; {/block:iflittlecursor}
}

#hamuko #sooj {
...

This is my jQuery code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function goForit() {
    var passwd;
    passwd = document.getElementById('yosugay').value;
    if(passwd=="{text:password}"){
        $(document).ready(function() {
            $('#hamuko').fadeOut(1000);
        });
    else{
        alert('{text:wrong alert}');
    }
}
</SCRIPT>

And here is the HTML added:

<body>
<div id="hamuko">
    <div id="sooj">
        <img src="{image:pixel}" />
        {text:form text}
        <img src="{image:pixel}" />
    </div>
    ...

However, the results are not as expected. The issues include:

  • The password code is not showing up
  • The transition from psswrdtest.tumblr.com to yamagitenshi.tumblr.com went wrong, resulting in a useless white box on the page
  • To view the full failed attempt code, check the source of http://yamagitenshi.tumblr.com

If anyone could provide insights into what might be going wrong, I would greatly appreciate it. Even if you can't, thank you for taking the time to read this.

Answer №1

Consider using the .click() method instead of inline onClick function and update your current javascript code like this:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
    $(function() {
        $('#button').click(function() {
            var password = document.getElementById('yosugay').value;
            if(password=="{text:password}"){
                $('#hamuko').fadeOut(1000);
            } else {
                alert('{text:wrong alert}');
            }
         });
     });
</script>

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

Looking to iterate through MongoDB using a promise and a forEach loop? I'm aiming to populate an array

I've been struggling to iterate through elements in my MongoDB database and save the values to an array. Despite putting in hours of effort, I can't seem to get it done. Here's the code snippet: //shopController.js const Product = require ...

Is it possible to exclude certain static files from being served in express.static?

const express = require('express'); const app = express(); app.use('/app', express.static(path.resolve(__dirname, './app'), { maxage: '600s' })) app.listen(9292, function(err){ if (err) console.log(err); ...

Is there a way to determine the dimensions of the DOCUMENT using Javascript instead of the VIEWPORT?

To ensure clarity, let me explain the distinctions between document, window, and viewport.... WINDOW refers to the entire browser window, including all navigation bars, etc.... VIEWPORT is the section of the window used to view the current XHTML/HTML/Fla ...

Modifying all occurrences of a specified string in an object (or array) - JavaScript

Is there a more efficient way to search through and replace all instances of a given string in a JavaScript object with unknown depth and properties? Check out this method, but is it the most optimal solution? var obj = { 'a' : 'The foo ...

Modify the JSON structure of a deeply nested object

I am attempting to convert a deeply nested JSON object from one structure to another so that it can be properly used with the jQuery Nestable library. Here is the original format I am working with: { "scanned": { "a3": { ...

How can screen readers be alerted about freshly loaded content through ajax?

Whenever a user clicks on a button, I want to add more content to the page. The new content will be visually clear, but how can I ensure that screen readers can easily access it? I've come across two best practices that suggest additional steps may b ...

Turn off Babel's strict mode when transpiling JavaScript files

Currently, I am facing an issue while trying to transpile a set of JavaScript files using Babel. Since Babel operates in strict mode by default, it triggers a syntax error whenever there is a conflict like the use of the delete keyword. The solution I am s ...

The arrangement of columns and floating images along with the surrounding white spaces

There are 3 columns, each sized at 33% with images of varying heights inside. When viewed on a device the size of an iPad, I want to change the column sizes to be 50%. However, when I do this, the third column appears in the middle bottom of the top two co ...

What is the process for refreshing information in VueJS?

<script> export default { data() { return { data: {}, dataTemp: {} } }, methods: { updateData() { let queries = { ...this.$route.query } this.data = { ...this.data, pID: queries.pid, s ...

Troubleshooting Recursive Logic Problem with hasOwnProperty in JavaScript and JSON

JSON data with a specific problem highlighted by the comment // doesn't get parsed currently: var oarsObject = [{ "coordinateReferenceSystem": "26782,15851 <-- not in a value", "positionReferenceType": "geogWgs84", "geogWgs84": ...

The reflight response received an unexpected HTTP status code of 500

Recently, I've been working on utilizing the Yelp Fusion API by making a simple ajax call. I started off by using the client_id and client_secret provided by Yelp to successfully obtain an access token through a 'POST' request in Postman, fo ...

Should the ListItem expand and collapse when clicked?

My react/material-ui component has the following structure: export const TodoItem: React.FC<Props> = ( {todo, itemKey}) => { const [dialogState, setDialogState] = React.useState<boolean>(false); const handleClose = () => { setDial ...

Utilizing Jquery's replacewith function to extract and read the id value

In this script, changing the dropdown list populated with opt1/opt2 triggers an alert displaying the ID as 'drop'. However, when I click on the 'clickme' text entry box, it transforms into a new dropdown. Yet, there is no alert issued ...

Testing URL Parameters in JEST with an API

Seeking integration tests using Jest for an API endpoint. Here's the specific endpoint: http://localhost/universities/ucla/class/2013/studentalis/johndoe. When tested with a put request, it returns 201 on Postman. However, the testing encountered a t ...

How to create a vertical bar chart in ASP.Net using C# with the help of jQuery?

Currently, I am looking to generate a stacked bar chart using query. Initially, I was successful in creating the chart with static values. However, now I need to implement it with dynamic values. I have been utilizing the flot plugin for this task, but I ...

Scrolling to the complete height of a div using scrollTop

Experience an automated scroll to the bottom of the div, followed by a smooth upward motion over 5 seconds, all while looping seamlessly. A small issue arises where the code only recognizes the standard height set for the div, not its actual scrollable he ...

JQuery Modal Popup Firefox flashing issue

This problem is quite unusual and challenging to explain. The issue I am encountering is related to a div containing a dropdown (select list) that displays the hours of a day (0-23). This div is shown in a JQuery modal dialog using the standard jquery met ...

Creating a worldwide object in JavaScript

I am trying to create a global object in JavaScript. Below is an example code snippet: function main() { window.example { sky: "clear", money: "green", dollars: 3000 } } However, I am unable to access the object outside th ...

What is causing the jqplot meter gauge problem with the error message "c.jqplot is undefined

I'm encountering an issue and seeking some guidance. I am relatively new to this, so navigating the problem proves challenging. I'm attempting to utilize jqplot's meter gauge according to the documentation, but it doesn't seem to be fun ...

Allow one child to be visible even if the parent container has hidden overflow (or a different setting)

Is there a way to achieve the same look as shown in this example, but without repeating the border-radius code for the div.left in the CSS? It feels redundant and I suspect my approach may not be optimal. If you have any suggestions on how to accomplish t ...