Get the current temperature by clicking on the "simpleweather

Working on an app using jQuery with the SimpleWeather plugin for HTML5 and Cordova.

Looking to overlay a background-image with the temperature.

-HTML-HEAD-

$(document).ready(function() {
    $.simpleWeather({
         location: '',
         woeid: '12474497',
         unit: 'c',
         success: function(weather) {
         html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>';

         $("#weather").html(html);
         },
         error: function(error) {
         $("#weather").html('<p>'+error+'</p>');
         }
         });
         });

-HTML-

<div id="third" class="top_navi">
<div id="weather">
   <a href="#" onclick="window.open('http://mobile.wetter.com/', '_blank', 'location=no')"></a>
</div>
</div>

-CSS-

#third{
background:url(../img/start/btnweather.jpg);
width: 95px;
height: 45px;
}
#third a{
width: 100%;
height: 100%;
display: block;
}

Link works fine without including the Temperature. How do I display the temperature and also keep the link functional?

jqueryhtmlcsscordova

Answer №1

Your code is currently inserting the temperature into the html of #weather within your anchor tags. For better structure, consider placing your #weather div inside of your anchor tags

<a href='#' onclick='do stuff'>
    <div id='weather'>
        //this is where your temperature will be displayed
    </div>
</a>

Update: You can display the temperature and link separately for improved clarity

<div id='weather'>
        <div id='temp'>
            //this is where your temperature will go
       </div>
    <a href='#' onclick='do stuff'>
    </a>
</div>

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

Tips for avoiding Navbar dropdowns covering other content

Using bootstrap 4 for a project and experiencing an issue with the navbar overlapping the content. How do I make the remaining content adjust when toggling the dropdown menu? To address this problem, I have applied a 50px margin to the body element. The ...

htmlcssbootstrap-4navbar

Transferring a multidimensional array from a controller in CodeIgniter to DataTables using jQuery

Is there a way to pass a multi-dimensional array from the controller into dataTables? While using CodeIgniter and jQuery dataTables, I encountered no issues when working with just a single array. However, when attempting to use a 2D array, the data does n ...

phpjqueryajaxcodeigniterdatatables

Modify the color of chips when the checkbox is toggled in Materialize CSS

I have been scouring the internet for a solution to my issue. Currently, I am working with materialize css chips and I am trying to achieve a specific functionality. I want the color of the last chip to turn green and the rest to turn red when a checkbox ...

javascriptjquerycssmaterialize

Using jQuery within an Ajax callback

I am seeking guidance on how to utilize a jQuery function that interacts with a form within an AJAX response. Can someone provide assistance with this? jQuery Function $(document).ready(function (e) { $("#load_timetable").on('submit',functio ...

phpjqueryajax

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

I encountered an issue when trying to compile a code in Reactjs. As a beginner in Reactjs, I'm struggling with this. Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-rea ...

javascripthtmlcssnode.jsreactjs

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

I am currently in the process of customizing a theme and a plugin within WordPress. In the plugin, there is a button that allows users to click on it to bring up a form where they can ask questions. While I want users to post their questions through this p ...

phphtmlcsswordpressfooter

position text to the right side of a slider gallery created with JavaScript

I'm currently utilizing a WordPress plugin known as Slideshow Gallery and I want to position the text below it to float next to the gallery on the right side. I've attempted the following: .bioText{ font-size: 14px; font-size: 1.428571429rem; ...

javascriptjquerywordpressslidercss-float

Stopping all subsequent functions if a condition is false or null can be achieved by implementing an abort

I have implemented a couple of ajax scripts in my code to manage user existence checks and user creation. The first ajax call is intended to verify if the user exists, while the second call aims to create the user if they do not exist. Although the ajax.d ...

jqueryajax

confused by the lack of guidance on manipulating arrays within the Autocomplete widget using Ajax

I am trying to work with an Autocomplete feature using geonames.org cities in the source option, but I'm facing some challenges when it comes to manipulating the arrays in the results. Despite having a test version that's "hard coded" and working ...

arraysjqueryfirebugjquery-autocomplete

Using Select2 JS to populate dropdown options with an AJAX response

I have a large list of pincodes ranging from 20,000 to 25,000. I want the user to search for the first 3 digits of a pincode and then trigger an ajax request to fetch a list of pincodes that match those 3 digits. Although I am successfully receiving a res ...

jqueryajaxjquery-select2

Implementing styling and adding a tooltipster to a select2 element that is created dynamically

In a partially dynamically created page, select2 elements are returned from an ajax call. jQuery manipulation is necessary in order to interact with the forms displayed in the complex table structure. The goal is to add a red border and a tooltipster when ...

jqueryjquery-select2tooltipster

Struggling with properly navigating a JSON file in my JavaScript code... specifically trying to access and retrieve the "responseObject.weather[i].weatherresponseObject.weather[i].description" data

Struggling with extracting data from a PHP file in JSON format to display on an HTML file using JavaScript. I seem to be encountering issues with accessing responseObject.weather[i].weatherresponseObject.weather[i].description, and I suspect it might be d ...

javascripthtmlajax

What is the best way to utilize the z-index property to ensure that the preceding element covers the one that follows

Is it possible to create an effect where the previous block overlaps the next one using CSS? .container { padding: 70px; width: 500px; margin: auto; display: flex; } .block { margin-left: -30px; width: 200px; height: 100px; border: 1px ...

htmlcss

Error encountered: jQuery version 1.8.0 reports a syntax error due to an unrecognized expression containing ">" symbol

After adding jquery to my website, I encountered an issue with the jQuery 1.8.0 error: Error Message: Syntax error, unrecognized expression: &gt; Can someone please assist me with this problem? ...

javascriptjqueryweb

When jQuery fails to detach() due to the presence of an input tag

I have a situation where I am trying to rearrange elements within a table. Everything works fine, until I introduce a tag, which triggers this error message:</p> <pre><code>Error: this.visualElement is undefined Source File: http://192. ...

javascriptjqueryhtmldom

Dynamic AJAX Dependent Dropdown Menu

Can you help me create a dynamic input form? I need assistance in creating an input form with a dynamic dropdown list, similar to the screenshot provided below: https://i.stack.imgur.com/rFSqV.png What is my current script setup? The script I have is d ...

javascriptphpjqueryajax

Adjusting the size of several images individually with jquery

Currently, I am working on a jQuery script that enables me to resize any image by simply clicking on it. The goal is to have the ability to click on one image and resize it, then click on another image and resize it independently. Here is the code I have b ...

javascriptjqueryimageresize

What is the procedure for closing a snackbar when the close button is clicked?

I am having trouble closing a snackbar when the close button is clicked. The snackbar should initially pop up on page load and only close when manually triggered. I have set the timeout to zero, but the snackbar does not close when the close button is clic ...

javascripthtmlvue.js

An array of tooltips linked to specific areas on an image using

Hello, I have created an imagemap with area polygons that display tooltips when the mouse hovers over them. Additionally, there is a legend at the bottom of the image map. My goal is to show the tooltip on the specific polygon area when the mouse is hove ...

javascriptjquerycss

If the ID (i.e. document.getElementById) is not found, then keep JavaScript running

I'm currently working on a JavaScript project where I need the script to gracefully handle missing div-ids and continue executing. I've looked into various solutions, but many involve either replacing the missing ID or placing information into an ...

javascripthtml