There are three elements in play here: an input field, a span element, and a div with a background image property.
<span>Go</span><input id="ImageUrl"/>
<div id="Image"></div>
I am working on a script where when a user enters or pastes a link into the input field and then clicks the Go button, the background image property of the div will change to the URL provided.
Within the <head> section:
<script type="text/javascript">
function displayImage() {
$('#Image').css('background-image', 'url("' + $('#ImageUrl').val() + '")');
}
</script>
Within the <body> section:
<span>Show Image</span><input id="ImageUrl" /> <!-- textbox for user input of image URL -->
<div id="Image" style="width:200px; height:200px;"></div> <!-- div to display the image -->
<input type="button" value="Display" onclick="displayImage()" /> <!-- display button -->
If you encounter any issues, please reach out to me for assistance :)
If you modify the <span> tag by assigning it an id of Button (to enhance specificity), you can implement the following solution:
$("#Button").on("click", function(){
$("#Picture").css("backgroundImage", "url('"+$("#PictureURL").val()+"')");
});
Example: jsfiddle.net/aeCu8
Basically, here's what you can do:
$('input[type=submit]').click(function(){
// An example of how to change it by adding "a"
$("#ImageUrl").val($("#ImageUrl").val() + 'a';
});
This solution will work smoothly. Remember to incorporate the url() component in the CSS function when calling it.
$("#ImageUrl").blur(function(){
$("#Image").css("background-image", "url("+$(this).val()+")");
});
Whenever the "search" button is clicked, my goal is to invoke SearchView. However, after inserting a few print statements into the code, it became evident that although SearchView is being triggered, the post function within it fails to execute. Here is t ...
I'm struggling to make this jQuery script work properly: $(document).on('knack-scene-render.scene_126', function() { $('#view_498 > div.kn-list-content.columns.is-multiline').each(function(index) { if ($(this).eq(inde ...
Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...
How can I make the background color fill the entire width of the page? I am new to HTML and CSS, so below is the code I have used for setting the background. Please provide clear instructions on what changes I need to make in my code to achieve this. I kno ...
I recently created a set of bootstrap cards displayed like this: <div class="card-deck"> <div class="card"> <img class="card-img-top" src=".." alt="Card image cap"> <div class="card-body"> <h5 cl ...
I am currently tackling a project that involves a collection of tiff images stored on a file server accessible only locally. The challenge lies in displaying these tiff images on a web browser, which has proven to be quite difficult. Here is the approach I ...
I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...
There is a snippet of HTML that resembles this: <a class="" data-style-name="Black" data-style-id="16360" "true" data-description="null"<img width="32" height="32" I am trying to extract the text "Black" from it and then click on it. However, there ...
I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...
Following a tutorial, I attempted to create a basic contact form using PHP. As a beginner in PHP, I found the process fairly straightforward, but encountered some bugs in the code. Upon integrating the code on my website, clicking the submit button redirec ...
I'm trying to create a div with absolute position inside of another div with relative position using Bootstrap 4 like this: .p-r{ padding:8px; background-color:#ddd; height:100px; } .p-a{ bottom:3px; background-color:#000 } <link re ...
The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...
My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...
I have a form with an input field that dynamically generates a list of names using Angular. My goal is to turn each name into a clickable link that will submit the form with that specific name as the input value. <form method="POST" action="/results/" ...
Looking to completely change the content of a datatable purely from a javascript perspective, without relying on Ajax calls. I've attempted using the following script: oTable.fnClearTable(); oTable.fnAddData(R); oTable.fnAdjustColumnSizin ...
I've been working with this code snippet. When I set the position of .thumb-title to absolute and use bottom: 50%, it shifts upwards in relation to its own height. .project-thumb { position: relative; } .thumb-title { font: 400 1.5rem 'La ...
In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...
I'm trying to pass an array from form inputs (checkboxes) using the get method. In my AJAX call, I have the following code: var subcat_checked = new Array(); $.each($("input[name='subcategories']:checked"), function() { subcat_checked.p ...
Is there a way to make the opacity transition repeat with each hover? I need some assistance with this. $(document).ready(function(){ $(".item1").hover(function(){ $('.mask1').css({"visibility":"visible","opacity":"1"}); }, ...
If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...