Advice on programming a webpage where user input displays a selected image - javascript

I am looking into setting up a basic website that displays a simple selection criteria (1 drop down box, 2 radio buttons sets) when the submit button is clicked it opens up a pop up window that displays an image whose location is specified by the selection criteria. This image is being updated at random so the pop-up needs to refresh or at least get and display the new image about every minute.
I have set up a simple html site (see below) that displays the image, located on my machine and refreshes every 30 seconds.
<head>
<meta http-equiv="refresh" content="30">
<title>
Real Time Image Display
</title>
<style>
#geo img {
max-width:100%;
max-height:100%;
margin:auto;
display:inline-block;
vertical-align: middle;
background-size: cover;
}
</style>
</head>
<body bgcolor=#00336>
<div id="geo">
<img src="file:///fileLocation/image.png" height="300" width="550" alt="">
</div>
</body>
I don't believe this is the best way to do this nor have I been able to figure out how to accomplish my original mission using this solution since I am unsure how to pass the selection criteria to these simple html sites to point them to the right image.
Any ideas on where I can look or what I can do?

First, you need to add an ID tag to your image:
<img src="file:///fileLocation/image.png" id="imageToChange" height="300" width="550" alt="">
Then you can use JavaScript to change the image, with no need for a refresh:
function changeImage() {
document.getElementById("imageToChange").src = "/newimage.png";
}
That's the basic of it anyway. It should be noted that your image should not be pulled from the local file system, the way you have it now. It needs to be on the server.
Here is an incredibly simple fiddle to show how this works:
https://jsfiddle.net/durbnpoisn/r7fk8ubz/

Related

How to add hidden search function to my offline collection website

Firstly, i have almost zero expreience with html or js etc. Please think me as noob :)
I have an offline website (basically images that goes to directions when i click on them), but since there are LOT of images right now, i want to add a search function.
This is my code --> https://jsfiddle.net/v3cjbyq7/
<html>
<head>
<style>
figure.image {
display: inline-block;
margin: 0px;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 24px;
padding-left: 20px;
width:225px;
height:340px;
}
</style>
</head>
<body>
<div class="images">
<figure class="image">
<img src="Assets/x.png" alt="x";>
</figure>
<figure class="image">
<img src="Assets/xx.png" alt="xx";>
</figure>
<figure class="image">
<img src="Assets/xy.png" alt="xy";>
</figure>
<figure class="image">
<img src="Assets/xz.png" alt="xz";>
</figure>
</div>
<script src="random.js"></script>
</body>
</html>
(random.js is just a script that gives random order to images)
I found this topic that gives me almost what i want.
how to implement Search function using Javascript or jquery
This is the code --> http://jsfiddle.net/Mottie/ztaz6/2/
There are 2 problems that i need to solve in this example. First, i want to adapt this code to my site, but things i tried didn't change anything. (honestly, i just tried random things by hoping it will work)
Second, i want to hide the search box. I want to create something that looks like this --> https://youtu.be/aOkirKWrHbU?t=85 (sorry i couldn't find a better example) Like when he write "sni", it only highlights things with "sni" inside. Highlighting is perfect, but hiding it would be ok as well.
okay if i understood your question well you need:
-store your images in a key value structure like a hashmap you can create it by following this JavaScript hashmap equivalent basically something like imagelist[image1] will return image1.
-put an empty div tag in your page and give it an id.
-write a keyboard listener after the ready call and in it's callback(which is the function in the $(document).ready(function(){} thingy) write a function that would first inject the text being inputed by the user in the div tag we created earlier and secondly it would look in your image dictionary(the storage we made earlier) using a search by regex(google it) and return the desired image and you can do whatever you like with it afterwards.

Insert Text Into Tumblr Ask Box

Does anyone know if there's a way to add text into the tumblr ask box when the page is first loaded? I'm running a blog where people can ask for advice from either a girl or a guy. I want them to click a link and go to the ask page but then depending on the link they clicked, #AskHim or #AskHer will be pre-added into the ask box. Without these "tags" (just basic text), all questions come to my inbox and I have no idea what perspective (guy or girl) they want their question answered from.
HTML:
<div id="askbox">
<iframe frameborder="0" height="190" id="ask_form" scrolling="no"
src="http://www.tumblr.com/ask_form/whatishethinking.tumblr.com"
width="100%" style="background-color: transparent; overflow: hidden;"
</iframe>
</div>
CSS:
#askbox {
margin: 10px auto;
width:600px;
}
I've found topics on how to insert text into a text box using javascript. However, tumblr has it's own built in tagging/html system so I'm not sure if this is even possible.
i.e.
<script>
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
</script>
Also, here is a link to my blog (Main Blog). The user will click either the "Ask Her" or "Ask Him" image links on the left side of my blog.
Then this will take them to my ask page where I want the text to be inserted into the ask box (Ask Page).
Thanks in advance for any advice you can give!
The only way I can think of achieving this off the top of my head is by using the placeholder attribute.
However, I'm not sure you'd be able to manipulate the main text area, since Tumblr utilizes iframes for customized ask pages.

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

Printing hidden images, each to a different page of a PDF

I have a webpage that is 95% dynamically generated by user selections and content pulled from a DB.
As part of the website the user uses canvases (kind of like powerpoint) and save the completed canvases to images. The images are then stored in the HTML in a div that has display:none.
What I want is the ability to click a button or just press print and have those images be the only things selected to print. Even better would be to print each individual image on a different page.
I have tried using #media print in various combinations with display:none/block and visibility:hidden/visible, but that does not seem to work, there is always residual content on the page.
In fact I cannot even see a print preview of the entire page without adding:
#media print{
*{
display:block;
}
}
Am I having CSS print problems b/c the contents of the page are created dynamically? Or is there another question I should be asking?
Thanks in advance for any help!
To re-iterate my problem: I had images in html that were hidden in a div that was not displayed. I wanted to print only those images to a PDF.
For those interested here is my solution. My HTML looks like this:
<div id="head">
<div id="img_group" style="display:none">
<img href="img 1" />
<img href="img 2" />
</div>
</div>
<div id="contents"></div>
I tried a CSS solution that did not exactly work: #Radoslaw M
* {
display: none;
}
does not work because this overrides any display: block; that follows. So my solution was originally to combine display:none and visibility:hidden the following css worked to display only the id="img_group div:
body{
visibility:hidden;
}
#contents{
display:none;
}
#img_group{
visibility:visible;
}
However the problem with this solution is that visibility:hidden leaves blank space where the div tags should have been.
Here was my round about solution. I used some javascript, a print button, and jsPDF (http://jspdf.com/):
<div id="head">
<button id="print">Print</button>
<div id="img_group" style="display:none">
<img href="data:img 1" />
<img href="data:img 2" />
</div>
</div>
<div id="contents"></div>
<script>
var doc = new jsPDF('landscape','pt', 'computer');
var i = 0;
$('#img_group').find('img').each(function(){
if(i != 0){
doc.addPage();
}
var imgData = $(this).attr('href');
doc.addImage(imgData, 'JPEG', 0, 0, 1067, 600);
i++;
});
doc.save('test.pdf');
</script>
This solved my problem of printing these hidden images to a PDF and even allowed me to print each image to a different page in the PDF. I hope this solution helps anyone else who has this problem in the future!

After a user hits the submit button, how do I make an image or icon appear over another image?

This question is for a website coded in HTML.
mapquest image
*I pulled the above image from google (located on mapquest.com) and I do NOT own this image. With that said, please look at this picture as a reference to go along with my question. Assume that this image does not start with the star, only appears after the user clicks the submit button.
How would I code in html (assuming jquery or javascript) to let a user check a box. Example: Categories: Shoes ▢ [SUBMIT]
Then after pressing the submit button, changing an image to have an icon on the imagemap appear such as the star. I want this where it has multiple available categories and after the user checks the boxes for the categories and clicks submit. Either the image completely changes to show the icons (star, or whatever I want for the icon), or it simply leaves the image and just adds the icon over the image.
Edit: I am adding this in to hopefully narrow down what it is that I am looking for in response to this question. I do not need my hand held if you do not wish to go through line by line, but even a link would suffice. Thanks.
I am looking for more specific details on how to code this. I don't think it would be as efficient to change the entire image every time, so how can I drop the icons on the image using something like an imagemap, so it drops at the appropriate coordinates over the image? Like if you searched on google maps and the icons drop onto the image (obviously not something as complex, but you get the idea).
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome | xxxxxx.com </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="margin:0px; padding: 0px;">
<div class="container">
<div class="header"><img src="images/bg_header1.png" width=950px usemap="#Map" border="0"/>
<map name="Map" id="Map">
<area shape="rect" coords="475,28,572,71" href="#" alt="about" />
<area shape="rect" coords="609,27,746,71" href="#" alt="locations" />
<area shape="rect" coords="783,27,894,73" href="#" alt="contact" />
<area shape="rect" coords="55,23,278,61" href="index.html" alt="home" />
</map>
</div>
<div class="content"><img src="images/parismap1.fw.png" width=950px/>
</div>
<div class="footer"><img src="images/bg_footer1.fw.png" width=950px/></div>
</div>
</body>
</html>
Based on the way I understand your question, there are a few things you need to do in order to dynamically add icons on top of an image. Here's the way I would do it.
First off, a good way to move icons around on top of an image without changing the image is to use CSS's position rule.
In your image div, set its position to relative, and the icon's to position:absolute, like so:
#imageDiv
{
background: url("/images/image.png");
position: relative;
}
#iconDiv
{
background: url("/images/icon.png");
position: absolute;
top: 0px;
left: 0px;
}
Then by adjusting the top and left rules, you can move the icon anywhere inside of the image div. (Note that these can also be substituted with bottom and right)
Hopefully I don't need to tell you you'll also need to give each of the divs a height and a width rule in order for them to show up.
MAKE SURE YOUR ICON DIV IS INSIDE OF YOUR IMAGE DIV:
<div id="imageDiv">
<div id="iconDiv">
</div>
</div>
Secondly, you'll need a javascript function to adjust the CSS rules. If you want it to be in a form using a submit button, you'll also need to return false on the submit function so it doesn't take you to the action page:
$(document).ready(function(){
$("form").submit(function(){
//Update CSS Here in a way similar to this:
$("#imageDiv").css({"top":someValue+"px", "left":someOtherValue+"px"});
return false;
}
}
That is one way to do it. Hope that helps.
NOTE: You'll need jQuery for this solution!
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Categories

Resources