I know how to make an image appear using onclick or onMouseOver but how can I make each click produce the appropriate image not just in the same place but, for example, in a row, next to it's previous apperance? My idea is this: I click on reference1 and a picture1 shows up. Then I click on reference2 and a picture2 shows up next to the picture1 already displayed. Now I click on reference1 again, and I want to see pictures 1,2,1 in a row. How can I do that? My ideal would be to see the row rolling when filled, and a delete button deleting the last image in that row, even making the pictures jump out being called from the text field, but I can search for these myself. My greatest concern for now is new click=new image. Thank you.
Assuming this is relatively simplistic- you could keep track of the current position in a list of images, afterwards create a function that deals with the current image then increments this position. Have the onClick event call this function, and there you are.
An example of this in action, using JQuery, can be viewed here:
http://jsfiddle.net/8Q4LQ/
Here's an example.
<html>
<head>
<style>
.refimg { width: 100px; height: 100px; }
.choices a { margin-right: 2ex; }
.choices img { display: none; }
#target { display:block; width: 500px; overflow-x: scroll; border: 1px solid black; }
</style>
</head>
<body>
Choices:
<div class="choices">
ref1
ref2
<image id="image1" src="image1.gif" class="refimg" />
<image id="image2" src="image2.gif" class="refimg" />
</div>
<br />
Selections: <input type="button" value="Delete" onclick="delImage()" />
<nobr id="target">
</nobr>
<script>
function putImage(src) {
var a = src.cloneNode(true);
a.id = ''; //clear id to prevent duplicate id
target.appendChild(a);
a.scrollIntoView(true);
return false;
}
function delImage() {
var a=target.children;
if (a.length>0) target.removeChild(a[a.length-1]);
}
target.style.height=((target.offsetHeight-target.clientHeight)+100)+'px'; //extend height for scroll bar
</script>
</body>
</html>
Related
I am attending an entry level HTML/CSS/JS course and our first assignment is to make a simple website about ourselves. We need to have a horizontal menu that when clicked displays certain information. For example, clicking "description" should display a short paragraph describing ourselves. From what I've researched it seems that my answer lies with using JQuery but I don't believe he expects us to know that nor utilize it this early. Is there another option that I may not be seeing?
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Jeremy Ortiz</title>
<div id="header">
<h1>A Little About Jeremy Ortiz</h1>
</div>
</head>
<body>
<img src="hwpic.jpg" alt="Me">
<div id="content">
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a class="selected" href="">Description</a></li>
<li>A form</li>
<li>Course List</li>
<li>Table</li>
<li>Contact Information</li>
</ul>
</div>
</body>
</html>
#header {
padding: 10px;
background-color: #6CF;
color: white;
text-align: center;
}
img {
position: absolute;
right: 7px;
bottom: 148px;
z-index: -1;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
My answer will assume your goal is to accomplish this task using basic Javascript instead of changing pages by navigating the user using the <a> elements. I understand that there are more efficient methods of performing this but I chose to present the information in a hopefully simple easily readable manner.
The way I would accomplish this is by changing your <a> elements:
<a class="selected" href="">Description</a>
To button elements and add the 'onclick' property with the function to call when the button is clicked:
<button onclick="displayDescription()">Click Me</button>
Now we need to create the elements that will be displayed upon clicking the button. For this we create some <div> other container that we can hide until the corresponding button is clicked.
<div id="description" style="display: none;">
Displayed when the description button is clicked.
</div>
Note** For every button we will need to create a <div style="display: none;"> to hide the information until its corresponding button is clicked.
Now we can create our Javascript function:
function displayDescription() {
var x = document.getElementById('description');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Note once again that in this method each Javascript function will map to a button in the same way each hidden will map to the same button.
If you need more help I recommend checking out w3schools and specifically for this problem here is a link to what you need to accomplish with your assignment.
http://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I hope this was helpful as I just wrote this during one of my college classes I will probably formalize my answer more at a later time today.
i am new to JavaScript and web development and it is the first time i see this kind of bugs. it is a very basic example, i have two divs- left and right- the left one has five images and the right one is empty , i have also two buttons copy and delete, each has an onclick event handler. the Copy button copies the entire left node (div) and appends it to the right div , the delete button should delete the last image in the right div and it does, the thing is i have to click twice on Delete button to delete one image so i have to click 10 times to delete the entire set. why this happens? what should i do to make the Delete button deletes an image by just clicking once ?
this is my entire code , tested on Microsoft Edge and Google chrome and i got the same result.
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
function Copy() {
copy = theLeftSide.cloneNode(true);
theRightSide.appendChild(copy);
}
function Delete() {
copy.removeChild(copy.lastChild);
}
div {
position: absolute;
width: 670px;
height: 520px;
background: red
}
#rightSide {
position: absolute;
left: 670px;
border-left: 1px solid black;
background: black
}
<input type="button" value="Copy" onclick="Copy()">
<input type="button" value="delete" id="btn" onclick="Delete()">
<div id="leftSide" style="width:400px">
<img src="smile.png" />
<img src="smile.png" />
<img src="smile.png" />
<img src="smile.png" />
<img src="smile.png" />
</div>
<div id="rightSide">
</div>
Most browsers instert by default an empty text node between each element of your page, your code is deleting one empty node for every img, that's why it seems to work half of the times.
Try this:
function Delete(){
var imgs = document.querySelectorAll('.rightSide img');
copy.removeChild(imgs[imgs.length-1]);
}
You're removing text nodes as well as elements. What you really want is copy.removeChild(copy.lastElementChild);
Here's what I have so far:
The following is my CSS for the box:
p
{
width: 100px;
padding: 25px;
border: 25px solid red;
margin: 25px;
position: fixed;
top: 100px;
}
And here is the JavaScript and HTML I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Box Mover</title>
<link rel="stylesheet"; style="text/css"; href="style.css">
</head>
<script>
function initialize()
{
var positionBox = document.getElementById("positionBox");
positionBox = addEventListener("click", moveBox);
}
function moveBox()
{
var positionBox = document.getElementById("positionBox");
positionBox.style.position = "absolute";
}
</script>
<body>
<p>This is a box.</p>
<form>
Number of pixels to move:
<input id="numPixels">
<br>
<br>
Direction to move:
<select id="directionSelection">
<option>Up</option>
<option>Down</option>
<option>Left</option>
<option>Right</option>
</select>
<br>
<br>
<input id="positionBox" type="button" value="Move Box">
</form>
</body>
</html>
The part I am stumped on is how I can get my positionBox button to interact with my directionSelection drop-down menu and numPixels within my JavaScript. Could someone help me out here?
In my class yesterday, my prof showed us an example of getting a button to move with hard-coded parameters, but now I need to do that with a box, making it move in the direction the user specifies, along with the number of pixels to move. I could also post that example code if it could be helpful to anyone.
The part I am stumped on is how I can get my positionBox button to interact with my directionSelection drop-down menu and numPixels within my JavaScript
In your moveBox function, use document.getElementById("numPixels").value and document.getElementById("directionSelection").value to get the number of pixels and the direction to move.
showed us an example of getting a button to move with hard-coded parameters, but now I need to do that with a box
To be able to move the box from your moveBox function, you will need to add an id attr to the <p>This is a box.</p> element so that you can select it with var box = document.getElementById("myBox");. Then, apply the values to box.style.top and box.style.left to move the box around instead of applying the values to the positionBox.
would like to add a play/stop button to an image onmouseover. I have several images in the same div that are called separately. If Image A is called I would like to have a arrow icon/button appear on the image. And onmouseout, the arrow/icon button to disappear from the image. I do not need this on all my images.
The functionality of the icon/button will be to change Image A to it's loop form and back.
Thanks for any help.
Here's what I have used so far: Not sure this is the most efficient way, but I have the main chart and call other charts as overlays, some are transparent layers some are not. When the main map is displayed, I want to call the buttons that float on top of the map. these will utilize the onmouseover/mouseout. And when clicked I want to change the main map to its loop version.
#chart
{
width: 1000px;
height:700px;
border: solid 1px #d9d9d9;
vertical-align: middle;
position: relative;
z-index: 1;
float: left;
}
<div id="chart">
<img name="mymap" src="http://www.dalta.com/still_image.gif"
width="1000px" height="700px" alt="Map" align="middle" />
<div class="basemap" id="HI_basemap" >
<img src="WEB_HI_BASEMAP.gif" width="1000" height="700"></div>
<div class="basemap" id="HI_etp" >
<img src="WEB_HI_ETP_BASEMAP.gif" width="1000" height="700"></div>
<div class="basemap" id="HI_vor" >
<img src="WEB_VOR_HAWAII.gif" width="1000" height="700"></div>
<div class="basemap" id="HI_route" >
<img src="WEB_ROUTES_HI.gif" width="1000" height="700"></div>
</div>
Tried this instead, but need a way to make infinite loop between 2 images.
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "http://ftpweb.delta.com/weather/WEB0HR.gif"
intImage = 2
return(false);
case 2:
IMG1.src = "http://ftpweb.delta.com/weather/WEB.gif"
intImage = 1
return(false);
}
}
I call this with an onClick but it only lets me do the function 1 time. Any ideas?
Then you can add the id attribute, to the image A. Such as this:
<img src="link/to/file.png" alt="photo" id="a" />
Now the JS would be as:
$('#a').hover(function () {
// do what so ever,
}
$('#a').mouseleave(function () {
// do what so ever,
}
There are many other events in the API. You can use them, and execute the code. However to play/stop you can do this:
$('#a').hover(function () {
$('.audioFile').play();
}
This can be achieved by giving a unique id to each of the images .
Then use getElementById("some id") to get a reference to that image. Then attach the onMouseOver and onMouseOut events to these refernces. This task will become very simple if you give a systematic id to the images like img1,img2 etc since you can use a for loop in this case.
I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?
You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}
Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>
Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});
In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.