I'm a beginner starting to learn coding. I have designed an neuroscience related experiment on a webpage with 4 layers of webpage. my first layer will be constant. Second layer shows different images during each round of questioning. Third and fourth layer are questions displayed at certain time intervals and/or on click of submit. I would like to know how do i display the different images every time. Precisely, Can i do it using a for loop!?
<html>
<head>
<Title> Experiment </title>
<link rel="stylesheet" type="text/css" href="displayfieldset.css">
</head>
<body>
<!-- Layer 1 of cross hair image -->
<div id="crosshair" style="background-color:black; position:absolute; width:100%; height:100%; z-index:1; align:center">
<img src="crosshair.jpg" width="1350px" height="750px" >
</div> <!-- Layer 1 closed -->
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z- index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img id="images" src="image1.jpg" style="width:1325px; height:720px; display:none">
</div> <!-- Layer 2 closed -->
<!-- Layer 3 Question 1 -->
<div id="questionone" style="z-index:3; position:absolute; display:none; margin-left: 180px">
<fieldset name="field1_1" id="field1_1">
<form name ="problem1_1" id="problem1_1" >
<b> Identify the problem shown in this image. </b>
<br>
<br>
<input type="text" name="answer1_1" id="answer1_1" maxlength="30" style="width: 400px">
<br>
<br>
<input type="button" value="Submit" onclick="showdiv()" >
</form>
</fieldset>
</div>
<!-- Layer 4 Question 2 -->
<div id="questiontwo" style=" position: absolute; z-index:5; align:center; display:none; margin-left: 180px">
<fieldset name="field1_2" id="field1_2" style="position:relative; align:center">
<form name ="problem1_2" id="problem1_2" >
<b> Propose a solution to the problem. </b>
<br>
<br>
<input type="text" name="solution1_2" id="solution1_2" maxlength="30" style="height: 200px; width: 400px">
<br>
<br>
<br>
<input type="button" value="Submit" onclick="hidediv()" >
</form>
</fieldset>
</div>
<script>
function showdiv()
{
document.getElementById('questiontwo').style.display = "block";
document.getElementById('questionone').style.display = "none";
}
function hidediv()
{
document.getElementById('piclayer').style.display = 'none';
document.getElementById('questionone').style.display = 'none';
document.getElementById('questiontwo').style.display = 'none';
}
<!-- Time out for image -->
setTimeout
( function()
{
document.getElementById('images').style.display = 'block';
}
,6000
);
<!-- Timeout for first question -->
setTimeout
( function()
{
document.getElementById('questionone').style.display = 'block';
}
,12000
);
</script>
</body>
</html>
Based on your coding,
The "crosshair" image, layer-1 is show always at z-index:1.
Layer-2 images will show after 6 seconds of page load at z-index:2.
Layer-3 div will show after 12 seconds of page load at z-index:3.
In the Layer-3, there is a submit button. If user click on the Submit button,
Layer-4 will be display and Layer-3 will be hide.
There is a submit button inside Layer-4 again, if user click on that button, all images will be hidden.
So, what you want to do?
Do you want to show images from Layer-2 by looping? If yes, here is sample codes:
var x = 0;
function myFunction(){
var Layer2Images = document.querySelectorAll("img.images");
if (x == Layer2Images.length)
x=0;
for (i = 0; i < Layer2Images.length; i++) {
Layer2Images[i].style.display = 'none';
}
Layer2Images[x].style.display = 'block';
x++;
}
setInterval(myFunction, 1000)
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z-index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img class="images" src="https://pixabay.com/static/uploads/photo/2012/05/29/00/43/car-49278_1280.jpg" style="width:400px;height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/24353/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/16155/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
</div> <!-- Layer 2 closed -->
Check out document.querySelector and document.querySelectorAll. With those you can target a single DOM node by CSS query selector or you can target multiple DOM all at once and then loop over them in a for of loop by converting the nodes to an array with Array.from.
Full working example
let i = 0
// Grab all the layers and read them into an array so we can iterate them.
let layers = Array.from(document.querySelectorAll('img.layer'))
const nextLayer = () => {
// increment i and compare incremented value, if greater than 3, reset to first layer.
if(++i > 3)
i = 1
// iterate all layers and set their CSS display property to none.
layers.forEach((x) => { x.style.display = 'none' })
// select the single layer we are currently on and set its css display to block.
document.querySelector(`img.layer_${i}`).style.display = 'block'
}
// show first layer
nextLayer()
// show next layer every 2 seconds
setInterval(nextLayer, 2000)
<img class="layer layer_1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<img class="layer layer_2" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg" />
<img class="layer layer_3" src="http://livewallpaper.info/wp-content/uploads/2015/12/Desktop-Cute-Wallpapers-HD-1920x1080-1.jpg" />
Related
I want html/Js/css code for a webpage of atleast 5-10 sentences wherein each sentence should appear on click.
Moreover, as all the content of that page appears, it should lead to another similiar page on the next click.
Can you help?
Try this, click inside the top area this is the body in this snippet here
let textelements = document.querySelectorAll(".text");
let counter = 0;
function clicker(){
if(counter < textelements.length){
textelements[counter].style.visibility = "visible";
counter ++
} else{
window.location.replace("<somepage>");
}
}
.text{
visibility: hidden
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="text1" class="text">Hello how</div>
<div id="text2" class="text">do you do</div>
<div id="text3" class="text">today</div>
<button class="btn" onclick="clicker()">Click Me</button>
</body>
I am new to JavaScript. I created this code in order to try and make buttons that will hide
and show certain pictures on the page. I have 3 buttons, the first of which is supposed to run my JavaScript code in <script></script> tags, the other two just have Javascript code inside them and they work fine. But they don't hide the picture once they are clicked a second time, which is why I am trying to do that for the first one if possible.
For some reason, I cannot get the first button with "open()" to work the way I want with my Javascript code. Can anyone with more experience please explain to me what I am doing wrong? Thank you in advance...
var btn1 = document.getElementById('1');
var btn2 = document.getElementById('2');
var btn3 = document.getElementById('3');
var display1 = btn1.getAttribute('display')
var display2 = btn2.getAttribute('display')
var display3 = btn3.getAttribute('display')
function open() {
if (display1 === ('none')) {
btn1.setAttribute('display', 'block');
} else {
btn1.setAttribute('display', 'none');
}
}
<img id="1" src="forge.PNG" style="height:320px; display:none; padding:10px">
<img id="2" src="lizard.jpg" style="height:320px; display:none; padding:10px">
<img id="3" src="walkway.jpg" style="height:320px; display:none; padding:10px">
<button onclick="open()">1</button>
<button onclick="document.getElementById('2').style.display='block'">2</button>
<button onclick="document.getElementById('3').style.display='block'">3</button>
I'd use event delegation to watch for clicks on the container. When the nth button is clicked, select the nth image, and toggle a class that hides/shows the image:
const images = document.querySelectorAll('img');
const buttons = [...document.querySelectorAll('button')];
document.addEventListener('click', (e) => {
if (e.target.matches('button')) {
const i = buttons.indexOf(e.target);
images[i].classList.toggle('hidden');
}
});
.hidden {
display: none;
}
<img id="1" src="https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=48&d=identicon&r=PG&f=1" style="height:320px; padding:10px" class="hidden">
<img id="2" src="https://www.gravatar.com/avatar/978ec0c47934c4b04401a8f4b4fec8bd?s=32&d=identicon&r=PG&f=1" style="height:320px; padding:10px" class="hidden">
<img id="3" src="https://lh3.googleusercontent.com/-uIr21N5ccCk/AAAAAAAAAAI/AAAAAAAAHeg/ohNEkpJKXQA/photo.jpg?sz=32" style="height:320px; padding:10px" class="hidden">
<button>1</button>
<button>2</button>
<button>3</button>
Problems with your original code include:
You're trying to select the elements before they exist in the DOM
Elements do not have a display property - in order to check the style of an element, you have to access its .style property first (eg, someImage.style.display)
Similarly, to set the style of an element, you have to set a property of its style property (eg someImage.style.display = <newDisplay>). Setting the display attribute of the element won't do anything.
Try to avoid inline handlers if at all possible - they have many problems and are pretty much universally considered to be quite poor practice. Always attach listeners properly using Javascript instead, whenever that's an option.
The event listener is the better solution, but if you want to see a working code in your way:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switchpics</title>
</head>
<script type="text/javascript">
var open = function(param) {
img = document.getElementById(param.innerHTML);
if (img.style.display == 'none'){
img.style.display = "block";
} else {
img.style.display = "none";
};
};
</script>
<body>
<img id="1" src="1.jpg" style="height:20px; display:block; padding:10px">
<img id="2" src="1.jpg" style="height:20px; display:none; padding:10px">
<img id="3" src="1.jpg" style="height:20px; display:none; padding:10px">
<button onclick="open(this)">1</button>
<button onclick="open(this)">2</button>
<button onclick="open(this)">3</button>
</body>
</html>
Essentially I have an interactive map which contains 4 div statements each of which contains an image of an island. I would like to create an on hover event which will display a corresponding sailing timetable depending on which image the user hovers. e.g. island 1 should display timetable 1.
I have the following code so far and ideally I am looking for a javascript or css solution:
<div class="Map">
<div id="Island_Morar">
<img src="images/IsleOfMorar.jpg"/>
</div>
<div id="Island_Rum">
<img src="images/IsleOfRum.jpg"/>
</div>
<div id="Island_Eigg">
<img src="images/IsleOfEigg.jpg"/>
</div>
<div id="Island_Muck">
<img src="images/IsleOfMuck.jpg"/>
</div>
</div>
<img id="TimetableEigg" src="images/TimetableEigg.jpg">
any help is appreciated.
You need some different markup if you want a plain css solution. If you want to have different timetables for each hover you should go with something like this:
markup
<div class="tt-container" id="Island_Rum">
<img src="images/IsleOfRum.jpg"/>
<img class="timetable" src="images/TimetableRum.jpg">
</div>
<div class="tt-container" id="Island_Eigg">
<img src="images/IsleOfEigg.jpg"/>
<img class="timetable" src="images/TimetableEigg.jpg">
</div>
<div class="tt-container" id="Island_Muck">
<img src="images/IsleOfMuck.jpg"/>
<img class="timetable" src="images/TimetableMuck.jpg">
</div>
</div>
css
.timetable {
display : none;
}
.tt-container:hover .timetable {
display : block;
}
That should do the trick
If you want to keep your current HTML code, I'd make three image blocks for timetables, and initially set them all to display: none; and add onmouseover event handlers to island elements which would contain Javascript statement which will set disply: block; on appropriate timetable.
Something like this:
<div class="Map">
<div id="Island_Morar" onmouseover="document.getElementById('TimetableEigg1').style.display = 'block';">
<img src="images/IsleOfMorar.jpg"/>
</div>
<div id="Island_Rum" onmouseover="document.getElementById('TimetableEigg2').style.display = 'block';" >
<img src="images/IsleOfRum.jpg"/>
</div>
<div id="Island_Eigg" onmouseover="document.getElementById('TimetableEigg3').style.display = 'block';" >
<img src="images/IsleOfEigg.jpg"/>
</div>
<div id="Island_Muck" onmouseover="document.getElementById('TimetableEigg4').style.display = 'block';" >
<img src="images/IsleOfMuck.jpg"/>
</div>
</div>
<img id="TimetableEigg1" src="images/TimetableEigg1.jpg">
<img id="TimetableEigg2" src="images/TimetableEigg2.jpg">
<img id="TimetableEigg3" src="images/TimetableEigg3.jpg">
<img id="TimetableEigg4" src="images/TimetableEigg4.jpg">
Seems you barely know the basics of HTML and already trying to jump too deep. External libraries will help you and speed up your progress. I see people gave you CSS solutions so here is a JS solution.
First thing is download the well known JS library called jQuery.
then load this file to your page and add a script at the bottom of your body tag:
$("div.map").on("mouseover", "#Island_Morar", function(e) {
$(this).show(); // option one
//$(this).addClass("class-name"); // option two
}).on("mouseout", "#Island_Morar", function(e) {
$(this).hide(); // option one
//$(this).removeClass("class-name"); // option two
});
With this script you can do whatever you want, for example - use the second option of adding and removing classes in order to animate your Timetables (see Example).
Possible CSS / JQuery solution:
$(".Map a").hover(
function() {
$('#' + $(this).attr('class')).show();
}, function() {
$('#' + $(this).attr('class')).hide();
}
);
.timetables img { display:none; }
<div class="Map">
<a href="#" class="islandmorar">
<img src="images/IsleOfMorar.jpg"/>
</a>
<a class="islandrum">
<img src="images/IsleOfRum.jpg"/>
</a>
<a class="islandeigg">
<img src="images/IsleOfEigg.jpg"/>
</a>
<a class="islandmuck">
<img src="images/IsleOfMuck.jpg"/>
</a>
</div>
<div class="timetables">
<img id="islandmorar" src="images/TimetableEigg.jpg"/>
<img id="islandrum" src="images/TimetableEigg.jpg"/>
<img id="islandeigg" src="images/TimetableEigg.jpg"/>
<img id="islandmuck" src="images/TimetableEigg.jpg"/>
</div>
Pure CSS solution but you need to place the large image in .main div
the first image will be displayed first and will change on hover on other images and when you leave move out of the main div it will show the first image
Note: used random images
.Map > div {
display: inline-block;
}
img.two,
img.three,
img.four,
#Island_Rum:hover ~ img.one,
#Island_Muck:hover ~ img.one,
#Island_Eigg:hover ~ img.one {
display: none;
}
img.one {
display: block;
}
#Island_Morar:hover ~ img.one {
display: block;
}
#Island_Rum:hover ~ img.two {
display: block;
}
#Island_Eigg:hover ~ img.three {
display: block;
}
#Island_Muck:hover ~ img.four {
display: block;
}
<div class="Map">
<div id="Island_Morar">
<img src="http://placeimg.com/100/100/any/animals" />
</div>
<div id="Island_Rum">
<img src="http://placeimg.com/100/100/any/arch" />
</div>
<div id="Island_Eigg">
<img src="http://placeimg.com/100/100/any/nature" />
</div>
<div id="Island_Muck">
<img src="http://placeimg.com/100/100/any/tech" />
</div>
<img class="one" src="http://placeimg.com/400/400/any/animals" />
<img class="two" src="http://placeimg.com/400/400/any/arch" />
<img class="three" src="http://placeimg.com/400/400/any/nature" />
<img class="four" src="http://placeimg.com/400/400/any/tech" />
</div>
Don't put class="map" to the wrapper div, give it to every div with id beginning with "Island_...".
Do the same with your timeTable images, give them a class "timeTable".
Put this before your "head" end tag :
<script>
"use strict";
//wait for every element to be loaded
window.onload = function(){initialization();}
</script>
Then, put this before your "body" end tag :
<script>
"use strict";
//first create a function that hides elements with class 'timeTable'
function hide(elements){
var htmlClass = document.getElementsByClassName(elements);
//hide every element with class
for (var i = 0 ; i < htmlClass.length ; i++){
htmlClass[i].style.display = "none";
htmlClass[i].style.visibility = "hidden";
}
}
//create a function that show only the timeTable you want
function show(element){
document.getElementById(element).style.display = "block";
document.getElementById(element).style.visibility = "visible";
}
function initialization(){
//replace 'someMapId' with the id of the image you are hovering
//replace 'someTimeTableId' with the id of the image you want to show
//replace 'timeTable' with the name of a class you want to hide
document.getElementById("someMapId").onmouseover = function(){
hide("timeTable");
show("someTimeTableId");
}
//repeat these 3 lines for every image the user will hover
}
</script>
Don't forget the quotes when using the functions.
You should use css for styling and javascript for interactions.
You don't need jQuery for basic scripts like that, it only slows page loading and keeps you away from learning basic javascript.
(Ok, I edited mistakes, now it works ;)
jsFiddle
I have a question about background image change in MVC.
I have a main css for the website, multiple webpages within the website and i have a webpage within the user profile to change the background image of the website.
I have set up 4 pictures on a row with function. I also have typed in a javascript prior to the images div, e.g in the top of
My problem is that when i run the page. the images wont change background when i click on the images. Thus I can change the background by image click if i go to inspect element and turn of background-image of my "Site.css" ( my main webpage css, ill throw in a gyazo here: http://gyazo.com/169070689792884090f1d9a9c9b96158).
Seems like the Site.css is static or something. Bootstrap is used on the website, also a masterpage is created, could that be a missing point from my pov.
also, how would I save the image to remain background on all pages afterwards?`
here is my cshtml code for image backgrounds:
#{
ViewBag.Title = "Javascript - Change Background";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>#ViewBag.Title.</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ButtonChangeBackground.css">
</head>
<body>
<script language="JavaScript">
var backImage = new Array();
backImage[0] = "/Content/img/Wood_floor_by_gnrbishop.jpg";
backImage[1] = "/Content/img/blue_wave_of_water-wide.jpg";
backImage[2] = "/Content/img/Falling-asleep-forest.jpg";
backImage[3] = "/Content/img/lava.jpg";
function changeBGImage(whichImage) {
if (document.body) {
document.body.background = backImage[whichImage];
}
}
</script>
<div id="choosebg">
<button onclick="javascript: changeBGImage(0);"><img id="wood" style="width: 100px; height: 80px;" src="~/Content/img/Wood_floor_by_gnrbishop.jpg" alt="" /></button>
<button onclick="javascript: changeBGImage(1);"><img id="water" style="width: 100px; height: 80px;" src="~/Content/img/blue_wave_of_water-wide.jpg" alt="" /></button>
<button onclick="javascript: changeBGImage(2);"><img id="forest" style="width: 100px; height: 80px;" src="~/Content/img/Falling-asleep-forest.jpg" alt="" /></button>
<button onclick="javascript: changeBGImage(3);"><img id="lava" style="width: 100px; height: 80px;" src="~/Content/img/lava.jpg" alt="" /></button>
</div>
<p> <div class="btn btn-default col-md-offset-2 "> #Html.ActionLink("Back to Profile", "Details") </div>
</p>
</body>
</html>
try this
...
function changeBGImage(whichImage) {
if (document.body) {
document.body.style.backgroundImage = 'url(' + backImage[whichImage] + ')';
}
}
...
How can I adapt the following code so that one of the divs will be open when the page is first loaded but will close when other divs are opened?
As it is now, the code hides the open div when another is open but only if that div is closed when the page is loaded.
I found the code here: Hiding a div when another is shown
So credit to whoever posted it.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden" />
<ul>
<li>Show myDiv1</li>
<li>Show myDiv2</li>
<li>Show myDiv3</li>
</ul>
<br/>
<div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
myDiv1
</div>
<div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
myDiv2
</div>
<div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
myDiv3
</div>
</body>
This is how I've adapted it so far to make it so each subsequent div can be accessed from the open div, but none of my (inexpert) tinkering has been able to make the code work when the first div in open to begin with, nor have I been able to find the answer using a search engine.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden"/>
<div align="center">Contents</div>
<div id="myDiv1" style="display:none">
Page 1
<br/>
Page 2
</div>
<div id="myDiv2" style="display:none">
<div align="right">Page 2 ►</div>
<br/>
text page 1
</div>
<div id="myDiv3" style="display:none">
◄ Page 1
<br/>
<br/>
text page 2
</div>
</body>
You could just add a call to MyFunction to show one automatically.
So, after the divs, you can add
<script>
MyFunction('myDiv1');
</script>
jsfiddle: http://jsfiddle.net/cyberdash/x8nQs/