Switch up the link color when it pops up

Is there a method to change the link color to gray without encountering glitches like on my site, where it mistakenly shows "Quick Nav."?

Click here to view the page with the glitch

I only want this particular link to be bold and not any other links.

Here is the current code:

     <script type="text/javascript">
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a style="text-decoration:none;" href="JavaScript:newPopup('<font color="gray">http://onlythebestoftheweb.x10.mx/navigation/quick.html</font>');">Quick Nav.</a>

Also, I'd like to mention that the page is intentionally set to display a 404 error, explaining the glitch.

javascripthtmlcsspopup

Answer №1

If you're utilizing CSS in your code, a simple way to style the popup link is by assigning it a class name and then styling that class using CSS.

Here are the CSS lines to add:

Your CSS should look like this:

a.popup-link {
    color: grey;
    text-decoration: none;
}

Next, update the link for the popup with the following:

HTML: 
<a class="popup-link" href="JavaScript:newPopup('http://onlythebestoftheweb.x10.mx/navigation/quick.html');">Quick Nav.</a>

Answer №2

  1. If you want to change the link color to gray, use this CSS:

    CSS:

    a {
    color: #848484;
}

  2. Your code may be "glitching" due to this line:

    <a style="text-decoration:none;" href="JavaScript:newPopup('<font color="gray">http://onlythebestoftheweb.x10.mx/navigation/quick.html</font>');">Quick Nav.</a>

    To fix it, escape double quotes within double quotes like this:

    <a style="text-decoration:none;" href="JavaScript:newPopup('<font color=\"gray\">http://onlythebestoftheweb.x10.mx/navigation/quick.html</font>');">Quick Nav.</a>

Answer №3

Here is a more organized practice for you.

http://jsfiddle.net/wkYJ5/3/

--

<script type="text/javascript>
    // Code for opening popup window
    var newPopup = function () {

        if (this.style.color === 'green' || this.style.color==='') { this.style.color = 'red'; } else { this.style.color = 'green' };

        var popupWindow = window.open(
            this.url, 'popUpWindow', 'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');

        return false;
    };
    setTimeout(function () {

        var qnLk = document.getElementById('qnLk');
        qnLk.onclick = newPopup;
        qnLk.url = 'http://onlythebestoftheweb.x10.mx/navigation/quick.html';

    }, 100);
</script>

--

<a id="qnLk" style="text-decoration:none;color:green;" href="#">Quick Navigation</a>

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

How can I stop an element from losing focus?

One issue I'm facing is that when I have multiple elements with the tabindex attribute, they lose focus when I click on any area outside of them. The Problem - In traditional desktop applications, if an element is not able to receive focus, clicking ...

javascripthtml

Trouble with implementing an onclick event listener in a foreach loop

While generating and adding HTML in a for loop, I noticed that adding onclick events within the same loop is not functioning correctly: items.forEach(item => { itemHtml = `<div class="${item.id}">${item.id}</div>`; $(".it ...

javascriptjqueryonclick

Retrieve GET ajax requests from a webpage by simply entering the URL

Here's an example from the API I'm currently working with: This particular page relies heavily on GET calls to load most of the data. Three main calls that catch my interest are: All these calls share a common feature, which is the numeric ID ...

javascriptphpjqueryajax

Unable to invoke a custom hook within another custom hook in a React application

I've developed a React application using create-react-app. Currently, I'm working on creating a custom hook that integrates with the Microsoft Authentication Library (MSAL). MSAL provides a custom React hook that I want to utilize within my own ...

javascriptreactjsreact-hooksazure-ad-msal

The functionality of window.location.href seems to be malfunctioning on mobile devices within an ionic application

Attempting to open a view with a function call from the UI side <ion-option-button class="button-light icon ion-chatbubble" ng-click="openView('username')"></ion-option-button> The controller code for this action is as follows: $sc ...

javascriptangularjsionic-frameworkhybrid-mobile-app

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

javascriptcsstwitter-bootstrapz-indexbootstrap-tour

How can we reset multiple selected values (mui chips) in a React Material-UI Autocomplete field when changing the value in a different field?

Is there a way to clear the mui-chips in Material UI Autocomplete TextField when the value in another field is changed? I have been struggling with clearing the subtype value when the Type value changes. Although I can update the drop-down options based on ...

javascriptreactjsautocompletematerial-uimulti-select

Validating phone numbers with regular expressions in Java

I recently started learning Java and Regex, and I'm currently facing a challenge with phone number validations. The task at hand is to create simple phone number validations. I already have an input field in my HTML code that has the attribute type=" ...

javaregexhtmljsp

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

$scope.categories = [ { "advertiser_id": "2", "tier_id": 1, "tier_name": "1", "base_cpm_price": "", "retarget_cpm": "", "gender": "", "location": "", "ageblock1": "", "ageblock2": "", "ageblock3": ...

javascripthtmlangularjsjson

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

htmlcsswordpressfonts

Alert displayed at the center of the browser when the value surpasses the specified number

My webpage retrieves SNMP data using PHP and displays it with HTML, color-coding the values. I want to add a pop-up alert when a value exceeds a certain number. I have attempted different jQuery solutions without success. The PHP code to get the value: ...

javascriptphpjqueryhtmlcss

Is there a simpler method for making multiple posts using an AJAX JS loop?

My form is quite extensive and uses AJAX to save. The JavaScript functions are stored in an external file and structured like this: function milestone09() { $.post('./post.3.AIGs2GRA.php?data=' + (secData), $('#milestone09').serialize( ...

javascriptjqueryajax

Do we really need to use the eval function in this situation?

Just wondering, is it reasonable to exclude the eval() function from this code? Specifically how <script> ... ... function addGeoJson (geoJsonPath, iconPath = "leaflet-2/images/marker-icon.png", iconSize = [30,50], popUpContent, ...

javascriptjqueryjsonleafleteval

Obtain the index by clicking on an element within an HTMLCollection

Within my HTML code, I have 9 <div> elements with the class ".square". I am looking to make these divs clickable in order to track how many times each one is clicked and store that information in an array. For example, if the fifth <div> is c ...

javascripthtml

Update a portion of a hyperlink using jQuery

Currently, I am utilizing Ransack for sorting purposes. However, I encountered an issue when attempting to modify the sorting links in cases where both search and sorting functionalities are implemented using AJAX. As a result, I have taken it upon myself ...

javascriptjqueryruby-on-railsajaxsorting

Troubleshooting Axios NPM connectivity issue in Express.js

I have created an express.js route with the following code snippet: - const path = require("path"); const express = require("express"); const hbs = require("hbs"); const weather = require("./weather"); const app = express(); app.get("/weather", (req, ...

javascriptnode.jsexpressaxios

Having trouble with hover effects not working on links due to the container? Here's a solution for you

I would like to create a layout with 3 columns for menu, story, and description. Each story should have its own unique description. Everything was working fine until I added a div to the middle column. The same issue arose with the right column but I manag ...

htmlcsshover

CSS Animation glitch with images

I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such ...

htmlcssanimationtransitionslide

Guide on sending a JSON response from an API endpoint in Next.js

As I work on developing a small REST API for a Next.js application, I encountered an interesting issue. Initially, when I placed my route.ts file in the directory structure rootDir -> app -> api -> hello -> route.ts with the following code snip ...

javascriptnode.jsrestnext.js

Error 404: Django failing to load image on the webpage

Just starting out with Django and I've hit a snag trying to load a static file (image). Here's the error message I'm getting: 127.0.0.1/:1707 GET http://127.0.0.1:8000/static/css/static/images/background/1.jpg 404 (Not Found) I suspect th ...

htmlcssdjangodjango-templates