How to get a image behind text when button clicked - javascript

I am making a site and I want to have a help button. When it is clicked an image shows up behind the text.
<body>
<div id="inputdiv">
Team 1:
<p>
<input type="text" name="fname" id="name">
<p>
Team 2:
<p>
<input type="text" name="fname2" id="name2">
</div>
<button onclick="showimage"> Help</button>
<img src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688">
How would I do this? Thanks.

First if you want to call a jquery function you must call as "showimage()" (in your code you should write as
<button onclick="showimage()"> Help</button>
And if you want to display image behind the text, set id for that div where you want to show the image and write jquery as
function showimage(){
$("#id-of-that-div").css("background-image", "url('https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688')");
}

first if you are trying to call a function it should be onclick="showimage()" not just onclick="showimage"
For the picture:
Try putting the text and picture in the same div maybe? I know that text is defaulted to go over a picture. If not look into some frameworks like foundation

Related

Onclick fill form fields in third party form iframe

since last two days i've been trying to achieve to auto fill fields in third party form in iframe exactly like this
$("#btn1").click(function() {
$("#test1").val("10");
$("#test2").val("1.5");
$("#test3").val("1000");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Formula 1:
<input type="text" id="test1" value="">
</p>
<p>Formula 2:
<input type="text" id="test2" value="">
</p>
<p>Formula 3:
<input type="text" id="test3" value="">
</p>
<p>What the answers to these formulas?</p>
<br>
<button id="btn1">Hint</button>
I have gone through so many tutes that i even forgot where i had started.
I have gone through this solution but it is not what exactly i want.
Another similar solution is here Fill input field inside an iframe when link outside of iframe is clicked
but the user is using her/his own javascript as jquery.postmessage.min.js
Any idea about how to achieve this?
You can access the inner HTML of an iframe using something like this
document.querySelector('iframe').contentWindow.window.document.querySelector('Tag you wanna select')
You might encounter this error blocked a frame of origin null from accessing a cross-origin frame . A fix to this is already answered here.
While this might just selected the select the element in the iframe, I'm still unsure if you can actually fill the form in the iframe.
Edit- Just tried it, you actually can alter the innerHTML of frame this way. Hope this helps.

Show div depending on a search

I have a small problem with a script that I want to find and show different divs depending on a search. The original script is something I found and used for a contact list, and that I now want to configure to do something else.
Original code (JSFiddle)
My edited code:
$('.Fruit').hide();
$('#search').click(function() {
$('.Fruit').hide();
var txt = $('#search-criteria').val();
$('.Fruit').each(function() {
if ($(this).id.toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="Fruit" id="Apple">
<h3>Some text about apples</h3>
</div>
<div class="Fruit" id="Orange">
<h3>Some text about oranges</h3>
</div>
I don't know if you understand what I'm trying to achieve...? I have, in this case, two divs - Apple and Orange. By default both are hidden, but if I enter Apple for instance in the search field and push the search button, the div "Apple" will show, and if I instead search for "Orange" then obviously I want the "Orange" div to show. If I search for anything else nothing will show, as long as there's not a div with an id that matches the searchword.
So basically I'm trying to build a database of preloaded content that can be searched and shown on the fly without reloading the page.
The error is, as far as I can understand, when I try to address and compare the divs id with the searchword on row 6 in the JS. Does anyone know how to do this, and make this work? Or does anyone have another solution that can perform this task?
The issue is because jQuery objects do not have an id property. You need to use prop('id') or just this.id.
Also note that you can improve your logic by making the id attributes you match with lower case, then convert the input to lower case, then you can just use a normal selector, like this:
$('#search').click(function() {
var txt = $('#search-criteria').val();
if (txt)
$('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});
.fruit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
<h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
<h3>Some text about oranges</h3>
</div>

Textboxes to show and edit data

I currently have text boxes that have the border removed so they don't appear as text boxes and are read only. I also have an edit button that shows the border and allows a user to edit the information and save it to a database.
My question should I be displaying data in a text box? It just makes it easier to edit otherwise I would have to add the text box dynamically when the edit button is clicked.
Another option is a 'span' or 'div' with the html5 attrtibute 'contenteditable' set to true;
<div contenteditable="true"/>
You can toggle true/false on click button event.
You could just use a div tag and load your output there.
<div id="output"></div>
It would remain invisible until used, and it would not be editable, and of course you could mark it up any way you like if you want the output area to stand out later.
You can try like this with jquery-
Html :
<input type="text" id="data" disabled="true" value="sampel data"/>
<input type="button" id="button" value="Edit" />
Jquery:
$("#button").click(function(){
$("#data").attr("disabled", false);
});
Live Preview

JQuery .replaceWith() suddenly putting new element in the wrong place?

This one is really baffling me. I'm using replaceWith() to "clear" a file input field. However, when it replaces it, it puts it back in the wrong place, and I have no idea why. I used the term "suddenly" in the title because what's even more mysterious is that when I stopped working for the weekend the replacement was working exactly as expected. Now I get back to work and suddenly it's not.
Here's the source HTML before calling replaceWith():
<label>Audio</label>
<i style="color:#888888;">MP3 or OGG format recommended</i>
<br>
<button id="clear_audio_input" style="display:none;">Clear</button>
<input type="file" value="" name="source_audio" style="width:300px;">
<br>
<div style="margin-top:15px;">
<b>Current: </b>
<i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i>
<br>
<input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio">
<span id="current_audio_info_a"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete">
Delete current audio?
Current audio will be replaced
Note the location of the FILE input field, named "source_audio". It's immediately after the "Clear" button.
Now, after I call replaceWith(), the HTML looks like this:
<label>Audio</label>
<i style="color:#888888;">MP3 or OGG format recommended</i>
<br>
<button id="clear_audio_input" style="display: none;">Clear</button>
<br>
<div style="margin-top:15px;">
<b>Current: </b>
<i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i>
<br>
<input type="file" value="" name="source_audio" style="width:300px;">
<input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio">
<span id="current_audio_info_a" style="display: inline;"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete">
Delete current audio?
Current audio will be replaced
Notice that it is now several lines down and inside another DIV.
Here is the script that controls the "Clear" button's actions:
$("#clear_audio_input").live("click", function() {
$("input[name='source_audio']").replaceWith($("input[name='source_audio']").val('').clone(true));
$("#source_audio_value").val($("#current_audio_source").text());
$(this).hide();
$("#current_audio_info_a").show();
$("#current_audio_info_b").hide();
checkRequiredMedia();
return false;
});
Here's the basic intended workflow. On load, the clear button is hidden because there is nothing yet to clear. After the user has selected a file, the clear button appears. Clicking the button will clear the file input (by replacing it) and then the button will hide again, essentially returning the form to the same state it was in on load.
Any reason why this oddity is happening (especially since it wasn't happening a few days ago, and I haven't changed anything since then)?
The issue is because you have two inputs with the name source_audio. To get around this, you will need to either give the two inputs fields an id, or change the name.
For example:
$('#my_file_input').replaceWith('<input id="my_file_input" type="file" name="source_audio" />');
$('#my_hidden_file_input').val('');

How to add a loading screen while waiting for search result to show up?

I have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.
<div>
<form action="****.jsp" method="get" id="search-id">
<input type ="text" name = "search" id="search" size="70"/><br>
<br />
<input type="Submit" value="Search" class="button rounded">
</form>
<br />
<br />
<br />
</div>
But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can't figure out how to implement it into the website so that it would show up after I click on the search button.
I'm very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?
Add a submit event handler to your form, that makes the animated gif appear and doesn't prevent the form submission. Example with JQuery:
$('#search-id').submit(function() {
$('#animated-gif').show();
});
assuming you have the animated gif hidden somewhere in the page:
<img src="..." style="display: none;" id="animated-gif"/>
Since you are new to HTML, you will need to search more about ajax and jquery. That will ideally answer your question. Have a look on this similar question as well. Hope this will help you.

Categories