Hey everyone, I created a simple slider using JqueryUI. When the value falls within a certain range, I generate an Image URL and then attempt to change the src attribute.
I am attempting to modify four images.
You can view the jsFiddle here.
I believe the code is correct, but it doesn't seem to be working. Any ideas why?
Make this change:
$("#" + postRetrmntImage).attr('src', ImageName );
to:
$("#postRetrmntImage").attr('src', ImageName );
The issue arises from not having any postRetrmntImage variable declared.
Check out the updated jsFiddle demo
demo http://jsfiddle.net/8Sw5J/
Explanation: Remember to utilize this line of code:
$("#" + sliderId).prop('src', ImageName );sliderId.
Furthermore, consider using .prop for better practice – learn more here: .prop() vs .attr()
Take a look at the demo to understand how it operates,
Hope this explanation is beneficial :)
full code
$(document).ready(function () {
makeSingleSliderWithImage('postRetrmntMnthlyPaymt', 0, 10000, 0, 500);
}
);
function makeSingleSliderWithImage(sliderId, minimum, maximum, val, steps) {
//Display label should have an X appended
$('#' + sliderId).slider(
{
//range: 'min',
min: minimum,
max: maximum,
step: steps,
//starting values for sliders
value: val,
slide: function (event, ui) {
//var ImageURL = "Images/";
//var ImageName = "";
//var ext = ".jpg";
if ((ui.value >= 0) && (ui.value <= 2000)) //Basic: 0-2000
ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
else if ((ui.value >= 2500) && (ui.value <= 4500)) //Moderate: 2500-4500
ImageName = "http://aux.iconpedia.net/uploads/14234829766434728.png";
else if ((ui.value >= 5000) && (ui.value <= 7000)) //Comfortable: 5000-7000
ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
else if ((ui.value >= 7500) && (ui.value <= 10000)) //Luxury:7500-10,000
ImageName = "Luxury";
//var fullURL = ImageURL + ImageName + ext;
//change Image URL
$("#" + sliderId).prop('src', ImageName); //{ src: fullURL });
alert($("#" + sliderId).prop('src'));
//change Slider Value
$("#" + sliderId + "X").text(ui.value);
}
}
);
}
Here's a helpful tip to consider:
Try using the following code snippet:
$("#" + updateProfilePic.toString()).attr('src', newImage );
Revise the line...
$("#" + postRetrmntImage).attr('src', ImageName );
with this updated code...
$("#postRetrmntImage").attr('src', ImageName );
Set a value for postRetrmntImage and then use prop instead of attr. Check out the difference between using prop.
var postRetrmntImage="postRetrmntImage";
$("#" + postRetrmntImage).prop('src', ImageName );
Give this a shot
$("#updateProfilePic").attr('src', 'profilepic.jpg');
I'm having trouble with my client-side form validation not working properly before the server-side validation kicks in. I've implemented Bootstrap 5.2 and followed the documentation by adding needs-validation and novalidate to the form. Scenario ...
When making an ajax XMLHttpRequest using the POST method, I am encountering a readyState of 4 with a status of 12030. It is known that 12030 is a Microsoft-specific state code indicating that the connection was not sustained. However, I have been unable to ...
Hello there, I've just begun working on some CSS projects and I'm facing an issue with my font import. Despite writing the code below for the font import, I'm not seeing any change in the font: @font-face { font-family:gamefont; src:url(raw ...
Is there a command in NPM that can display the minimum required Node version based on the project's modules? ...
I'm struggling with this code and can't seem to keep the navbar-brand aligned with the links. <nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <but ...
Is there a way to toggle the 'eager' validation in a form before and after submission? I attempted to use $.validator.setDefaults() initially with onkeyup and onfocusout properties set to false. In the invalidHandler method, I reset onkeyup and ...
I'm a little confused by the title, so let me clarify with an example. Let's say I have the following CSS code inside a file: #container_1 { width:50%; border:1px solid black; } #container_2 { background-color:red; padding:5px; ...
I inserted the GTM code within the SharePoint Master Page body tag. <body> <--Body content goes here --> <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX" he ...
I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this: <div class="container-fluid py-2"> <div class="d-flex flex-row flex-nowrap" style="overflow: auto;"> <div cl ...
After setting up my hosted database, I encountered an issue with fetching data from it. Despite confirming that the database is running smoothly through the Swagger app, no data appears when called via API form. import React from 'react'; export ...
Consider this example HTML markup (link to jsFiddle): <div style="float: right; width: 200px; height: 200px; background-color: red; margin: 0 20px 0 30px;"> Block 1 </div> <div style="height: 100px; background-color: green;">Block ...
I am facing an issue where my html code for email templates works perfectly on all platforms except for Microsoft Outlook Desktop. The problem lies in the display of product information that is not showing correctly in Outlook. Within my code, I have keys ...
When trying to display specific information from just one array, I'm facing an issue where the for loop is also iterating through other arrays and displaying their names. Is there a way to only show data from the intended array? const link = document. ...
I'm new to web development and I'm trying to figure out how to center my form on the page using CSS and HTML. Can someone help me out? <form action="login.php" method="post"> username: <input type="text" id="txtusername" /><br /&g ...
Let's consider this scenario: There is a function called foo() in my controller: $scope.getOffers = function(){ var txt1 = "aaaa" + "<br>" + "bbbb"; $scope.newData = txt1; }; Here is the relevant HTML snippet: <div class="help-b ...
I am currently working on a project that involves two files, A .js and a .php. The .php file is responsible for connecting to the MySQL database, while the .js file serves as the frontend of the system. I am in the process of setting it up so that it sends ...
When adding a record to a MySQL database with XAMPP and the "mysql2" package (^3.6.2), I encountered an issue. export const addPage = async (req,res) => { try { if(req.session.user !== undefined) { ...
I have implemented the wickedpicker plugin on a page that contains 2 time fields. I am struggling to update the time in each field separately when a button is clicked. It seems like the script is already bound to the input element which is causing issues ...
Looking to replicate the effect of background-size: cover on a <video> element. I was able to achieve this with the code below: <video id="videobackground" autoplay="true" loop="true"> <source src="BackgroundFinal2.mp4" type="video/mp4" ...
div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...