I am creating form page where I wanted to hide text area box when clicked on image as well as to swap the image and vice-versa. Right now I am able to hide/show div but image is not displayed when text area box is hidden and also does not return to first image. There are 2 scripts one for div show/hide and another to swap image.
1. image: output before click
2. image: after hitting on an image
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
var onImg= "testim.png, valm.png";
var offImg= "testip.png, valp.png";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>
Please help.
Thanks a lot, in advance!
[1]: http://i.stack.imgur.com/7PwdK.png
[2]: http://i.stack.imgur.com/5j6FE.png
Pointer 1
Change the below variable to the absolute link of your image
var onImg= "testim.png, valm.png"; //this should be one link
var offImg= "testip.png, valp.png"; //this should be one link
(Just to be on the safe side for testing test)
example
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
Pointer 2
change
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
to this
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
that is it should be </a></li> instead of </li></a>
Pointer 3
Change this
<a href="javascript:showhide('textInputField1');">
to this
<a href="#" onclick="javascript:showhide('textInputField1')">
Attach it directly to the onclick event since href attribute simply points to a location.
here is a snippet
- <script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
obj.style.display == "none"?obj.style.display = "":obj.style.display = "none";
// if (obj.style.display == "none"){
// obj.style.display = "":;
// }
//else {
// obj.style.display = "none";
//}
}
}
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>
Related
I have some tabs and there are several buttons in the third tab which display different images when clicked. The problem is that when any of these buttons are clicked and an image is displayed, all the other images on my web page disappear. Perhaps this is because I'm not appending the images to that particular tab?
What do I need to add/change in my code to fix this issue?
// tabs
function selectTab(tabIndex) {
document.getElementById('tab1Content').style.display = "none";
document.getElementById('tab2Content').style.display = "none";
document.getElementById('tab3Content').style.display = "none";
document.getElementById('tab4Content').style.display = "none";
document.getElementById('tab1').classList.remove("active");
document.getElementById('tab2').classList.remove("active");
document.getElementById('tab3').classList.remove("active");
document.getElementById('tab4').classList.remove("active");
document.getElementById('tab' + tabIndex + 'Content').style.display = "block";
document.getElementById('tab' + tabIndex).classList.add("active");
}
// Colour Swatch
function showImage(el, id = 'tab3Content') {
var images = document.getElementById('img1');
Array.from(images).forEach(i => i.style.display = 'none');
var img = document.createElement('img');
img.style.marginTop = '-50px'
img.setAttribute("width", "850");
img.setAttribute("height", "500");
img.setAttribute("src", "");;
if(el.getAttribute('data-id') == '1'){
}
else if(el.getAttribute('data-id') == '2'){
img.setAttribute("src", "");;
}
else if(el.getAttribute('data-id') == '3'){
img.setAttribute("src", "");;
}
else if(el.getAttribute('data-id') == '4'){
img.setAttribute("src", "");;
}
document.getElementById(id).appendChild(img);
}
.tab {
border-radius: 0.5px;
}
.tabButton {
color: #FFFFFF;
border: 1px solid;
border-color: rgb(45, 68, 117);
border-radius: 0.3em;
color: rgb(45, 68, 117);
margin-top: 50px;
background-color: white;
margin-left: 70px;
padding-left: 100px;
padding-right: 100px;
padding-top: 14px;
padding-bottom: 14px;
margin-right: -75px;
}
<html>
<body>
<button class="tabButton active" id="tab1" onClick="selectTab(1);">Tab1</button>
<button class="tabButton" id="tab2" onClick="selectTab(2);">Tab2</button>
<button class="tabButton" id="tab3" onClick="selectTab(3);">Tab3</button>
<button class="tabButton" id="tab4" onClick="selectTab(4);">Tab4</button>
<br />
<div class="contentTab" id="tab1Content" style="display: block;">
<div class="tabcontent">
<p>tab 1</p>
<img class="img-position" src="">
</div>
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
<p>Tab 2</p>
<img src="">
</div>
<div class="contentTab colour-swatch" id="tab3Content" style="display: none;">
<img id="img1">
<button class="colour-btn colour-btn--1"data-id="1" onClick="showImage(this)"></button>
<button class="colour-btn colour-btn--2" data-id="2" onClick="showImage(this)"></button>
<button class="colour-btn colour-btn--3"data-id="3" onClick="showImage(this)"></button>
<button class="colour-btn colour-btn--4"data-id="4" onClick="showImage(this)"></button>
</div>
<div class="contentTab" id="tab4Content" style="display: none;">
<div class="container">
<p>tab4</p>
<img class="img" src=""></div>
</body>
</html>
Simply change var images = document.querySelectorAll('img'); to a more specific selector.
'img' targets every image tag (<img>) on your page.
Perhaps var images = document.querySelectorAll('.img'); is what you want (or '.img-position?) with a dot to point to a class.
I have a problem with jQuery toggle between 4 divs. I have no idea why it doesn't work. It just showed me the first div and didn't do anything. When I used it on another webpage, it worked.
Code is below:
HTML:
<table style="width: 75%; border: 0; text-align: center; margin: 0 auto;" align="center" padding="10"><tr>
<td width="50%" align="center"><a class="ukaz" target="1"></a></td>
<td width="50%" align="center"><a class="ukaz" target="2"></a></td></tr>
<tr>
<td width="50%" align="center"><a class="ukaz" target="3"></a></td>
<td width="50%" align="center"><a class="ukaz" target="4"></a></td>
</tr>
</table>
<div id="div1" class="cil" style="display:block;">
text
</div>
<div id="div2" class="cil">
text
</div>
<div id="div3" class="cil">
text
</div>
<div id="div4" class="cil">
text
</div>
CSS:
.cil {
display: none;
}
JS:
jQuery(function () {
jQuery('.ukaz').click(function () {
var index = $(this).index(),
newTarget = jQuery('.cil').eq(index).slideDown();
jQuery('.cil').not(newTarget).slideUp();
});
});
Your current expression finds the index of the clicked element but it doesn't know the context to which element it needs to find index to. You need to find the index of the click element via using all elements matching class .ukaz
$('.ukaz').click(function () {
var index = $('.ukaz').index($(this));
$('.cil').slideUp();
$('.cil').eq(index).slideDown();
});
Example : https://jsfiddle.net/DinoMyte/qgo90beb/1/
I am working on a project right now. When you click on one item the info below appears, i wanted to know how to make it disappear when you click on the next item without reclicking the same item....For example I have pizza's in my project, I want to click meat pizza to see the toppings then click on cheese pizza to see the toppings and the meat toppings disappear.
Here is my Html code....
<table align="center">
<tr>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px;width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv')" href="#Meat">Meat Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv2')" href="#Cheese">
Cheese Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px;">
<a onclick ="javascript:ShowHide('HiddenDiv3')" href="#Veggie">
Veggie Pizza</a>
</fieldset></td>
</tr>
</table>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" align="center">
<a name="Meat">
<table>
<tr><td width="220">Meat Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv2" style="DISPLAY: none" align="center">
<a name="Cheese">
<table>
<tr><td width="220">Cheese Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv3" style="DISPLAY: none" align="center">
<a name="Veggie">
<table>
<tr><td width="220">Veggie Toppings</td></tr>
</table>
</a>
</div>
Here is my javascript......
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
function showApp(a) {
var aside = document.getElementById('aside');
var arr = aside.getElementsByTagName('span');
for (i = 0; i < arr.length; i++) {
if (arr[i].getAttribute('id') != a) {
arr[i].style.visibility = 'hidden';
}
}
x = document.getElementById(a);
var state;
if (x.style.visibility == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
x.style.visibility = state;
}
Some solutions for example:
You may create global JS element which will contain current showed element and update it every click.
You may on every click hide all elements at first and then show required element.
Add for loop in ShowHide() function like this :
UPDATED
ShowHide = function(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
var alltexts = document.getElementsByClassName('mid');
for(var i=0;i<alltexts.length;i++)
alltexts[i].style.display = 'none';
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
In ShowHide we have to hide all texts before showing the clicked item text .
Find Working Fiddle HERE.
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
What happens:
What I want to happen:
HTML:
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks"/>
<div1 class="inner" style="display:none;">
<ul>
<li><a>Front full</a></a>
<li><a>Double Front</a>
<li><a>Aerial twist</a>
</ul>
</div1>
<div2 class="inner" style="display:none;">
<ul>
<li><a>front 180</a>
<li><a class="click" onclick="tr4(this); hide(this)">Webster</a>
<li><a class="click" onclick="tr4(this); hide(this)">Loser</a>
</ul>
</div2>
<div3 class="inner" style="display:none;">
<ul>
<li><a>Off-axis backtuck</a>
<li><a>Back Full</a>
</ul>
</div3>
CSS:
div1 {
color:blue;
}
div2 {
color:blue;
position:relative;
left:150px;
}
div3 {
color:blue;
position:relative;
left: 300px;
}
JS:
function showSpoiler1(obj)
{
var inner = obj.parentNode.getElementsByTagName("div1")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler2(obj)
{
var inner = obj.parentNode.getElementsByTagName("div2")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler3(obj)
{
var inner = obj.parentNode.getElementsByTagName("div3")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
I want all the lists to horizontally line up with each other. When i use absolute positioning the text in the next section of my file doesnt move down so my lists collide with it. How could I make them line up and keep them from intersecting with th heading under it?
Try to add table for each div. This should work as you want.
<table>
<tr>
<td>
<div1 class="inner" style="display:none;">
...
</div1>
</td>
<td>
<div2 class="inner" style="display:none;">
...
</div2>
</td>
</tr>
</table>
Try toggling to display: inline-block or float them to the left;