show/hide link in javascript - javascript

I have 4 links which place under seperate <td>, I want to show/hide the td based on a particular selection of parent object
<td nowrap align=right id="dis_mirr" style="visiblility: visible;">
<a id="first" style=font-weight:normal href=javascript:createwin();>
Mirror
</a>
</td>
<td nowrap align=right>
<a id="second" style=font-weight:normal href=javascript:breakwin();>
Break Mirror
</a>
</td>
here is code:
if(record.get('model') == 'top'){
document.getElementById('first').visibility = "hidden";
}else{
document.getElementById('first').visibility = "visible";
}
The code works but the <td> is still there it should be removed when I hide it.

You have to use the parentNode attribute, which will return the parent element, here the <td> :
if(record.get('model') == 'top'){
document.getElementById('first').parentNode.visibility = "hidden";
} else {
document.getElementById('first').parentNode.visibility = "visible";
}

Try this:
document.getElementById("first").parentNode.style.display = 'none';

Related

Switching the divs via script in wordpress

I have the following code to switch between 2 divs:
<script>
function SwapDivsWithClick(div1,div2)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if( d2.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
}
}
var divs = [ "zdroj1", "zdroj2" ];
function toggle(layer) {
var d
for(var i = 0; i < divs.length; i += 1) {
d = document.getElementById(divs[i]);
d.style.display = 'none';
}
d = document.getElementById(layer);
d.style.display = '';
}
</script>
And the HTML part:
<table>
<tbody>
<tr>
<td class="btn" style="text-align: center;"><a href="javascript:toggle('zdroj1')" ><b>VIDEO 1</b></a></div></td>
<td class="btn" style="text-align: center;"><a href="javascript:toggle('zdroj2')" ><b>VIDEO 2</b></a></div></td>
</tr>
</tbody>
</table>
<div id="zdroj1">
VIDEO CODE 1</div>
<div id="zdroj2" style="display:none;">
VIDEO CODE 2</div>
How can I add more divs and show only that one which link is clicked? I think that there must be more if functions in the script but I am not sure, because I am a newbie in this part of coding. Thanks in advance!
Edit: Based on your needs to have a dynamic amount of divs/buttons on each page see the code below. Instead of manually creating the click eventListener you need to get an array(-ish) of the buttons based on a common class name (querySelector could also be used for this) and add the event listener to each. The buttons should be created with a data-attribute (or other identifier) that corresponds to one of the divs you want to toggle.
Inside the function that is called you can loop through all your msg divs, hide them all and unhide the one that matches the data-attribute of the button that was clicked. This method allows you to have any number of buttons and divs as long as each button has a matching div for it to toggle.
// Find all the buttons and divs that have the common className for each
var buttons = document.getElementsByClassName('button')
var divs = document.getElementsByClassName('msg')
function toggle() {
// Loop through the divs and hide them all
for(var i = 0; i < divs.length; i += 1) {
divs[i].style.display = 'none';
}
// Show the div whose id matches the data-message attribute of the button that was clicked
document.getElementById(this.dataset.message).style.display = 'block';
}
// Add a click listener to each button to run the toggle function
for(var i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener('click', toggle, false)
}
<table>
<tbody>
<tr>
<!-- Add a common class to all buttons and a data-message attribute to each button
that corresponds to the id of the div it will toggle on-->
<td class="btn"><button class="button" data-message="msg1">VIDEO 1</button></td>
<td class="btn"><button class="button" data-message="msg2">VIDEO 2</button></td>
<td class="btn"><button class="button" data-message="msg3">VIDEO 3</button></td>
<td class="btn"><button class="button" data-message="msg4">VIDEO 3</button></td>
</tr>
</tbody>
</table>
<!-- Add a common class to all divs that will be toggled -->
<div class="msg" id="msg1">
VIDEO CODE 1
</div>
<div class="msg" id="msg2" style="display:none;">
VIDEO CODE 2
</div>
<div class="msg" id="msg3" style="display:none;">
VIDEO CODE 3
</div>
<div class="msg" id="msg4" style="display:none;">
VIDEO CODE 4
</div>

how to assign a js function to a class and get id when clicked

I'm working on a calculator and have a mousedown and mouseup function on every id. Is there some way to clean that up and have a function called anytime a class element is clicked and be able to get the id that's been clicked inside the function?
here's a link to a myfiddle calculator
also, I noticed that when I placed my javascript directly in the JS box it didn't work, however as a script embedded in the html it works fine. Could someone explain why?
<tr>
<td class='noborder' colspan='1' rowspan='2'> </td>
<td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
<td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
<td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
<td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
<td class='noborder' colspan='1' rowspan='2'> </td>
</tr>
<script>
function mouseDown(id) {
document.getElementById(id).style.backgroundColor = "gray";
}
function mouseUp(id) {
document.getElementById(id).style.backgroundColor = "white";
}
</script>
I realized a way how to add mousedown and mouseup events on all the elements with a class:
var elements = document.getElementsByClassName("buttons");
for (var i = 0; i < elements.length; i++) {
elements[i].onmousedown = function() {
mouseDown(this.id);
mouseUp(this.id);
}
}
I tested it on w3schools.com.
(Also, I don't know what you mean by JS Box. Sorry.)
It might be because you have an id conflict on the page. Using IDs like "1" is not recommended for this reason; better to be more specific.
In fact, there is no need to query the element by its ID anyway. You can operate directly on the element by just passing it into the handler. E.g.
<td class='buttons' onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" >1</td>
<script>
function mouseDown(element) {
element.style.backgroundColor = "gray";
}
function mouseUp(element) {
element.style.backgroundColor = "white";
}
</script>
EDIT: As #bgaury mentioned, a CSS active pseudo class is a far better option for this use case however.
Remove the script tag, and add this to your css style:
.buttons:active {
background-color: gray;
}
For calculations use something like this:
<script>
var table = document.getElementsByTagName("table")[0]
table.addEventListener("click",clicked);
function clicked(el){
if (el.hasClass("buttons")){
//magic
}
}
</script>

make HTML table as a slideshow/carousel

I have a html table,which i am populating using java script. the table has 10 cells.i want to make the table as a carousel so that first 5 cells are shown and then user can move to next 5 cells. I have tried looking on the internet,but all my search leads to plugins. i dont wana use plugin,as i am learning javascript.
My table code is shown below:
<div>
<table id="daily_forecast">
<tr id="time">
<td id="time0">
<td id="time1">
<td id="time2">
<td id="time3">
<td id="time4">
<td id="time5">
<td id="time6">
<td id="time7">
<td id="time8">
<td id="time9">
</tr>
<tr id="temp">
<td id="temp0">
<td id="temp1">
<td id="temp2">
<td id="temp3">
<td id="temp4">
<td id="temp5">
<td id="temp6">
<td id="temp7">
<td id="temp8">
<td id="temp9">
</tr>
</table>
and javascript wjich populates is
function populateTable(disp_forecast){
var tbl=document.getElementById("daily_forecast");
tbl.style.width = '900px';
tbl.style.height='200px';
tbl.style.position="relative";
tbl.style.left='60px';
tbl.style.top='40px';
tbl.style.border = '1px solid grey';
elemrow1Id="time";
elemrow2id="temp";
elemrow1Id_day="day"
var key4,key5,key6="";
for(var i=0;i<10;i++){
key4=elemrow1Id.concat(i);
key5=elemrow2id.concat(i);
key6=elemrow1Id_day.concat(i);
var day_time=disp_forecast[key4];
var day_temp=disp_forecast[key5];
if(day_time==0){
var day=disp_forecast[key6];
day=day.toString();
day=day.concat('\n');
day=day.concat("12am");
document.getElementById(key4).innerHTML=day;
//document.getElementById(key5).innerHTML=day_temp;
}
else if(day_time>12){
day_time=day_time-12;
day_time=day_time.toString();
day_time=day_time.concat("pm");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
else if(day_time==12){
day_time=day_time.toString();
day_time=day_time.concat("pm");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
else{
day_time=day_time.toString();
day_time=day_time.concat("am");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
document.getElementById(key5).innerHTML=day_temp;
}
}
Please provide me some resource for making this table as a carousel or some solution.
This might at least get you started (I'm assuming horizontal movement). Typically a carousel is a div inside a div, with the outer div acting as a viewport/window, revealing only the desired parts of the inner div. You then scoot the inner div in response to some buttons or key presses.
CSS
.outerWrap, .innerWrap {
position: relative;
}
.outerWrap {
overflow: hidden;
}
HTML
<div class="outerWrap">
<div class="innerWrap">
<table> <!-- your stuff goes here --> </table>
</div>
</div>
Javascript
var elem = document.getElementsByTagNames('innerWrap')[0];
elem.style.left = "15px";
elem.style.left = "15px" is just an example of shifting the inner div to the right a little. You'll want to create a loop or something that moves it incrementally, probably in response to buttons, event listeners, etc...

jquery get img src onclick event

I am having trouble referring to an image on an onclick evet.
my example is that the "this" reference points to an element that has couple of images and i want to change a specific image.
<li class = "header_det">
<table width="100%" style="font-size:14px;">
<tr>
<td width="10%" align = "right" rowspan = "2">text</td>
<td width="80%"><img width="30" height="30" src="images/map_white_pin.png" ></a></td>
<td width="10%" align = "center" class = "header_pic"><img width="20" height="20" src="images/route_det/down_arrow.png" ></td>
</tr>
</table>
</li>
The js code for the onclick event is this:
$(".header_det_map").click(function() {
var img_type = $(this).attr(".header_pic img").attr("src") ;
if(img_type == "images/route_det/down_arrow.png") {
$(this).attr(".header_pic img").attr('src', "images/route_det/up_arrow.png");
} else{
$(this).attr(".header_pic img").attr('src', "images/route_det/down_arrow.png");
}
});
this code doesn't work, and i have to use the this pointer because i have other element with the same classes that i do'nt want to change.
Thanx
I think this line:
var img_type = $(this).attr(".header_pic img").attr("src") ;
should be:
var img_type = $(this).find(".header_pic img").attr("src") ;
All you jquery is wrong : .header_pic img is not an attribute but an element of .header_det_map
Plus, you're HTML is a bit messy :
You shouldn't have space between attribute name and value in your
HTML
There is closing </a> tags
You should close '<img /> tags
<li class="header_det">
<table width="100%" style="font-size:14px;">
<tr>
<td width="10%" align="right" rowspan="2">text</td>
<td width="80%">
<img width="30" height="30" src="images/map_white_pin.png" />
</td>
<td width="10%" align="center" class="header_pic">
<img width="20" height="20" src="images/route_det/down_arrow.png" />
</td>
</tr>
</table>
</li>
$(".header_det_map").click(function() {
var img = $(this).find(".header_pic img"); // use a variable to store your image element in case you have to change the container class
var img_type = img.attr("src"); // not necessary to store it, could be use as it in the if statement
if(img.attr("src") == "images/route_det/down_arrow.png") {
img.attr("src", "images/route_det/up_arrow.png");
} else {
img.attr("src", "images/route_det/down_arrow.png");
}
});

how to pass the text value of one html paragraph element to another html paragraph element using javascript in asp.net

I'm trying to pass the text value of one of my html paragraph element to another html paragraph element when the javascript function is called. When this function is called it will load the div element which has the enlarged image and a paragraph content, that is why I'm passing the value from one html paragraph element text value to another paragraph element text value. Here's my code below for your reference:
Javacript:
<script type="text/javascript">
function LoadDiv(url)
{
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
img.onload = function() {
imgFull.src = img.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
img.src= url;
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight)
{
bcgDiv.style.height = document.body.clientHeight + "px";
}
else
{
bcgDiv.style.height = document.body.scrollHeight + "px" ;
}
imgDiv.style.left = (width-650)/2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width="100%";
bcgDiv.style.display="block";
imgDiv.style.display="block";
var artcontent = document.getElementById("TextBox2").value;
document.getElementById("content").value = artcontent;
/* after I added these two lines of codes below which I thought these could pass the value but it just ruined my function and not loading anymore the div element I'm calling,it will now only flash the div element for 1 sec without event displaying the content of the artxt2 html paragraph.*/
var artcon = document.getElementById('artxt1').innerHTML;
document.getElementById('artxt2').innerHTML = artcon;
return false;
}
</script>
Asp.Net Source code:
<div id="divBackground" class="modal">
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<img id="imgFull" alt="" src=""
style="display: none;
height: 500px;width: 590px" />
</td>
</tr>
<tr>
<td >
<p id ="artxt2" runat ="server" ></p>
<textarea name = "artcont" id = "content" cols ="0" rows ="0" readonly ="readonly" style ="width :590px; height :100px; color :Blue; font-family :Verdana; display :block;"></textarea>
</td>
</tr>
<tr>
<td align="center" valign="bottom">
<input id="btnClose" type="button" value="close"
onclick="HideDiv()"/>
</td>
</tr>
</table>
</div>
I need someone who can assist me and figure out what I'm missing here..Thanks in advance.
Change the name with id.
artxt1 must be an id of a control not name.
var artcon = document.getElementById('artxt1').innerHTML;
document.getElementById('content').innerHTML = artcon;
Try this -
var artcon = document.getElementById('<%=artxt1.ClientID%>').innerHTML;
document.getElementById('<%=artxt2.ClientID%>').innerHTML = artcon;
When you have runat=server on a control the ID is auto generated by .NET (unless you specifically tell it to use static IDs which I think was only introduced in ASP.NET 4.0)
So you need to use the ClientID property to get the generated ID for the control http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

Categories

Resources