I've got 3 images in the screen. Each image should display a different form in the SAME POSITION in the screen and hide the other 2 forms.
Image1: When clicked show form1 and hide form2 and form 3
Image2: When clicked show form2 and hide form1 and form 3
Image3: When clicked show form3 and hide form1 and form 2
Forms should be shown at the same position. I just see a solution calling the whole page by sending a parameter in the URL stating which form to show on the screen. I would really like to show the right form depending on what image is clicked at the moment without that.
I'm using HTML5, Bootstrap 4 and JavaScript - any suggestion using any of these languages would be perfect.
There are a lot of answers to things like this, try looking around before asking a question.
Here is one of the simplest approaches you will ever see using only JS and HTML
JavaScript
const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');
const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');
imageOne.addEventListener("click", function() {
formOne.style.display = "block";
formTwo.style.display = "none";
formThree.style.display = "none";
});
imageTwo.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "block";
formThree.style.display = "none";
});
imageThree.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "none";
formThree.style.display = "block;
});
HTML
<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">
<div id="formOne" style="display: none">
<form>
....
</form>
</div>
<div id="formTwo" style="display: none">
<form>
....
</form>
</div>
<div id="formThree" style="display: none">
<form>
....
</form>
</div>
Ok, you need:
the 3 images
the 3 forms, with position absolute or fixed (so that they stay in the same position)
a JS function attached to the click event of every image that changes the correspondet form style to display:block and the others to display:none.
Something like:
var form1 = document.getElementById('form1')
document.getElementById('form1').onclick = function() {
form1.style.display = 'block'
form2.style.display = 'none'
form3.style.display = 'none'
}
For each one of your forms.
Here is a working pen I made to show how to do it.
https://codepen.io/jaimelopez18/pen/zWOEMw
This is all made with pure js (vanilla). You should try to learn this first and after you get a good grasp of it, I recommend taking a look at VueJS.
I just made a simple skeleton in jsFiddle as per your requirements, have a look at the code.
HTML:
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
</head>
<body>
<div class="jsImgWrp">
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form2"/>
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
</div>
<div class="jsFormWrp form-wrapper">
<div class="jsFrm form1 active">
form 1
</div>
<div class="jsFrm form2">
form 2
</div>
<div class="jsFrm form3">
form 3
</div>
</div>
</body>
</html>
CSS:
.form-wrapper .jsFrm {
display:none;
padding:10px;
border:solid 2px #eee;
width:200px;
height:100px;
}
.form-wrapper .jsFrm.active {
display:block;
}
.jsImgWrp img {
width:100px;
display:inline-block;
}
Javascript:
$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
var formId = $(this).data('formid');
$('.jsFrm').removeClass('active');
$('.' + formId).addClass('active');
})
});
Hope this may help you.
Related
I'm not super great a javascript yet and I'm mostly a front end person. I am trying to have people's submissions be randomized across the screen but not entirely sure how to (it's okay if it wipes away everything with the refresh of the page). I have this so far:
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
</script>
Which gives me an option where someone submits something and it appears on the bottom but I'm trying to have each response randomize somewhere on the screen.
I have the input displayed beneath the textbox but can't figure out how to have multiple answers show and then randomize across the screen.
Create multiple elements where you display the responses, then select one of them randomly when you're displaying.
function myFunction() {
var x = document.getElementById("myText").value;
let divs = document.querySelectorAll(".demo");
let chosen = divs[Math.floor(Math.random() * divs.length)];
chosen.innerText = x;
}
.demo {
height: 20px;
}
<input id="myText"> <button onclick="myFunction()">Enter</button>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
I'm using the navigo vanilla javascript router library to make a single page application and I'm trying to implement this part.
router
.on('/products/list', function () {
// display all the products... here i need to hide and show
})
.resolve();
I thought the thing I need to do is hide and show some divs so how do i set all divs as invisible or make everything on the page invisible.
<body>
<div id="homepage">
<h1>home</h1>
</div>
<div id="ad">
<h1>advert</h1>
</div>
<div id="errorpage">
<h1>error</h1>
</div>
<div class="state">
<span class="users">?</span> online
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/navigo#7.1.2/lib/navigo.min.js"></script>
<script src="script.js"></script>
</body>
Hide DIV using id
<div id="homepage">
<h1>home</h1>
</div>
using JQuery
$('#homepage').hide();//hide
$('#homepage').show();//Show
Using Javascript
document.getElementById('homepage').style.display = 'none'; //hide
document.getElementById('homepage').style.visibility = 'hidden'; // hide
document.getElementById('homepage').style.display = 'block'; // Show
document.getElementById('homepage').style.display = 'inline'; // Show
document.getElementById('homepage').style.display = 'inline-block'; // Show
document.getElementById('homepage').style.visibility = 'visible'; // Show
If you want to hide all the div in page
Using JQuery
$('div').hide();//hide
Using Javascript
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
The easiest and most efficient way would be putting the products in a container (i.e. div) and set its display (to none and block) or it's visibility, or opacity (whichever floats your boat):
<div id="products">
....
</div>
JS:
to hide:
document.GetElementById("products").style.display = "none";
to show:
document.GetElementById("products").style.display = "block";
I want to configure a hyperlink to close/open its related div in asp.net. Basically, when a user clicks the sign X, the panel should be closed and the sign + should be appeared. When + is clicked, the panel should be showed again. I could not manage this and I believe my main problem is "document.getElementById('<%= lb_closePanel.ClientID %>').value" is coming as undefined. Here is the code until now. I appreciate for your helps!
<!DOCTYPE html>
....
<div class="appheader">
<h1 class="appheaderContent">Search for Client</h1>
<div id="checkBox"></div>
<div id="closePanel"><h2 id="lblClosePanel">Close Panel</h2>
<div id="xButton">
<asp:LinkButton onclientclick="CloseOpenPanel('Search')" runat="server" Text="X" style="text-decoration:none; color:white" ID="lb_closePanel"></asp:LinkButton>
</div>
</div>
</div>
<div class="app" id="Search">
...
<div>
...
</html>
<script type="text/javascript">
function CloseOpenPanel(obj) {
alert(document.getElementById('<%= lb_closePanel.ClientID %>').value); //here it comes undefined!!!!
if (document.getElementById('<%= lb_closePanel.ClientID %>').value == 'X') {
document.getElementById(obj).Visible = false;
lb_closePanel.Text = '+';
}
else {
document.getElementById(obj).Visible = true;
lb_closePanel.Text = 'X';
}
}
</script>
Your code is OK, just instead of the property value use innerHTML
alert(document.getElementById('<%= lb_closePanel.ClientID %>').innerHTML);
Instead of using .value, try using .innerHTML instead to get the text inside of your link button (rendered as an a tag)
I've been trying to get this to work and thought it would be relatively easy but i'm just unable to target my div's with javascript.
I want a list of boxes and each one will be clickable and each one has a buddy which is hidden. when you click a , it hides and shows its buddy which will have an input box. Type the text in you need and press ok and it changes back to it's original displaying the text you have entered.
the head contains the following:
<head>
<script language="javascript">
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>
And then my HTML contains:
<div id="div0">
<a href="#" onclick="showhide('div1');" style="text-decoration:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
Input: <div id="showinput"></div>
</div>
</a>
</div>
<div id="div1" style="display:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
<input type="text id="addInput" /">
<input type="submit" value="submit" name="submit" onclick="showhide('div1');" />
</div>
</div>
I'm trying to add the following but it just won't update the original and the script just makes the buddy div show below the original. How can i hide the original at the same time?
var myobj = document.getElementById("addInput");
var mytext = myobj.value;
document.getElementById("showinput").innerHTML = mytext;
You are missing a closing quote around type="text so the input id is not set. Try:
<input type="text" id="addInput" />
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>