We Keep Coding

Make a left border move to center in javascript

I am making a change in my current div such that I need a vertical line at the middle of my div. So, I saw many solutions in which they are making a left border and with the help of left property they are moving it 50% of the left (which is actually is in middle).
Here is how I am making my div:
if (id == "Metricbar" ) {
var Parentdiv = document.getElementById("homeContainer");
var rowDiv = document.createElement("article");
rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
rowDiv.style.border = "1px solid #ddd";
rowDiv.style.marginBottom = "1px";
rowDiv.style.marginTop = "1px";
rowDiv.style.borderLeft = "2px solid #ddd";
Parentdiv.appendChild(rowDiv);
var ctrlDiv = document.createElement("div");
ctrlDiv.setAttribute("data-widget-editbutton", "false");
ctrlDiv.className = "jarviswidget";
ctrlDiv.setAttribute("data-widget-fullscreenbutton", "false");
ctrlDiv.id = id;
var temp = $compile(ctrlDiv)($scope);
angular.element(rowDiv).append(temp);
rowDiv.appendChild(ctrlDiv);
}
My question is how will I move it to the center. Is there any way to do that?
I have tried:
rowDiv.style.borderLeft.marginLeft = "50%";
rowDiv.style.borderLeft.Left = "50%";
rowDiv.style.borderLeft.leftMargin = "50%";
But none of this is helping. Can anybody point me in the right direction.
HTML File :
<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
<div class="row" id="homeContainer"></div>
<div class="modaldialogs" style="display: none">
<div class="center">
<img alt="" src="img/ajax-loader.gif" />
</div>
</div>
</section>
But I am using this div multiple times. I am here checking on the basis of id.
I want this black line as shown in image

If you only need to add a vertical line to the article element let's go with the simplest solution - CSS!
First, give the article element and position: relative or position: absolute. Then add a :after psuedo-element to create a vertical bar.
The HTML and Javascript have are untouched (except a small change to the borders on the article) so you only need to add a few lines of CSS.
var Parentdiv = document.getElementById("homeContainer");
var rowDiv = document.createElement("article");
rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
rowDiv.style.marginBottom = "1px";
rowDiv.style.marginTop = "1px";
rowDiv.style.borderTop = "2px solid #ddd";
rowDiv.style.borderRight = "2px solid #ddd";
rowDiv.style.borderBottom = "2px solid #ddd";
rowDiv.style.borderLeft = "2px solid #ddd";
Parentdiv.appendChild(rowDiv);
#homeContainer article {
height: 300px; // Just for demo purposes since we have no content
position: relative;
}
#homeContainer article:after {
content: "";
height: 100%;
width: 0px;
position: absolute;
border-right: 3px solid #000000;
right: 50%;
}
<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
<div class="row" id="homeContainer"></div>
<div class="modaldialogs" style="display: none">
<div class="center">
<img alt="" src="img/ajax-loader.gif" />
</div>
</div>
</section>

I found answer. We can have a new div by using javascript and a new class name which will have a border-left.
This is my solution
var element = document.createElement('div');
element.className = "divider";
rowDiv.appendChild(element); \\appending it to parent
CSS
.divider {
content: "";
position: absolute;
z-index:1;
top: 0;
bottom: 0;
left: 45%;
border-left: 2px solid #C0C0C0;
}

JavaScript: any tips on improving this code on opening/closing menu?

I've been lurking w3schools for some time and studying javaScript. I've struggled for a few days with a code of which the function is to open and then close the opened menu on click again. I couldn't do this with a single , but I've managed to it with two.
I've managed to do this with the following method:
<div id="menuClosed" style="background: blue; color: white; width: 500px; height: 50px; transition: 0.3s">
<p id="menuString" style="margin: auto; text-align:center;">
Click on the button to open the menu
</p>
<button id="menuButton" onclick="changeStyle('Closed')" style="margin-left:250px;">Open</button>
<div>
<p style="font-size: 30px; text-align:center;">Bonefish</p>
</div>
<button id="menuButton2" onclick="changeStyle('Open')" style = "margin-left:250px; display: none;">Close</button>
</div>
<script>
function changeStyle(idMenu) {
//compresses OPEN and CLOSE buttons ID into a var
var menuButton = document.getElementById("menuButton");
var menuBotton2 = document.getElementById("menuButton2");
//Compresses menu DIV's ID into a var
var menuConfig = document.getElementById("menu" + idMenu);
//styles that will serve as factor for opening/closing the menu
var style1 = "background: blue; color: white; width: 500px; height: 50px; transition: 0.3s";
var style2 = "background: blue; color: white; width: 500px; height: 150px; transition: 0.3s";
//opens Menu and changes ID to "menuOpen"
if (idMenu === "Closed") {
menuConfig.style = style2;
menuConfig.id = "menuOpen";
menuButton.style = "display: none; margin-left:250px;";
menuButton2.style = "margin-left:250px; display: initial;"
}
//Closes menu and chages ID to "menuClosed"
if (idMenu === "Open") {
menuConfig.style = style1;
menuConfig.id = "menuClosed";
menuButton.style = "display: initial; margin-left:250px;";
menuButton2.style = "margin-left:250px; display: none;";
}
}
</script>
What I actually wanted to do, is to be able to both open and close the menu with the same button, but I can't figure out how.
I believe it can be done through changing <button id="menuButton" onclick="changeStyle('Closed')" style="margin-left:250px;">Open</button> changeStyle('Closed') into changeStyle('Open') and making necessary adjustments, but, again, my tries on that have failed.
Thanks by advance.

If you could use jQuery and some css, it you'll get what you want
UPDATED WITH JAVASCRIPT
var divmenu=document.getElementById('menu');
function toggleMenu(btn){
if(btn.className=='open'){
btn.className='close';
divmenu.className='close';
btn.innerText='Open';
}else{
btn.className='open';
divmenu.className='open';
btn.innerText='Close';
}
}
div{
padding:10px 0;
color: white;
transition: 0.3s;
background: blue;
}
div.open{
height: 150px;
}
div.close{
height: 20px;
overflow:hidden;
}
<div id="menu" class="close">
<p id="menuString" style="margin: auto; text-align:center;">
Click on the button to open the menu
</p>
<p style="font-size: 30px; text-align:center;">Bonefish</p>
</div>
<p style="text-align:center; margin:0; padding:5px 0;"><button type="button" class="close" onclick="toggleMenu(this);">Open</button></p>

I am interested in using toggle class to change the color of the background of an image

I set up a button to change the color. It is showing classA but it will not change to classB onclick. The button seems to be working so I am not sure what is not working here. I would appreciate any help. Here is the code.
'<script>
function toggleclass() {
var myElement = document.getElementById("id1");
if(myElement.className == "classA") {
myElement.className = "classB";
} else {
myElement.className="classA";
}
}
window.onload=function() {
document.getElementById("btn1").onclick =toggleClass;
}
</script>'
HTML
'<td><div id="id1" class="classA"><img src="images/this.png" width="300" height="300"
alt="ttemp"></div>
<input type="button" id="btn1" value="ChangeColor" />
</td>'
CSS
'.classA {
width: 300px;
border: 2px solid black;
background-color: green;
color: red;
padding: 3px;
}
.classB {
width: 300px;
border: 2px solid black;
background-color: blue;
color: red;
padding: 3px;
}'
Thanks for your help,
Frank

Bro, do you even jQuery? http://api.jquery.com/click/
$('#btn1').click(function(){
$('#id1').toggleClass('classB');
});

Personally I would do the following:
$('#btn1').on("click", function(e){
e.preventDefault();
$('#id1').toggleClass("classB");
});
The prevent code should stop the page from jumping but still preform the action whilst toggling the class
Just my 2 cents

Wordpress - Javascript Toggle Div elements display styles

I have a code that I am working on so that it has a heading tag and an arrow floated to the right and when you click on that arrow it shows the contents of the hidden element and changes the down arrow to an up arrow. Everything seems to work fine except the links I have under the image within the toggle do not work. I cannot highlight the text for some reason so I am assuming that there is an overlap somewhere in my coding.
The JavaScript
function toggleDisplayNewark() {
document.getElementById("toggleMe").style.display == "none";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "inline";
document.getElementById("toggleMe").style.visibility = "visible";
document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe").style.display = "none";
document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
}
}
The HTML
<div id='newark'>
<div class='text-heading'>
<h2>Newark</h2>
<a href="#newark" onclick="toggleDisplayNewark();">
<div id='arrow'></div>
</a>
</div>
<div id='toggleMe' style='display: none;'>
<div class='alignleft thumb-imgs'>
<img src='img/excercise.png' />
<a href='http://exercise.com/' target='_blank'>Exercise Institute</a>
</div>
<div class='clear'></div>
</div>
</div>
The CSS
#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}
#toggleMe {display: none;}
.text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
.clear {clear: both;}
.thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}
I built this in a html file before I put it into wordpress so I could make sure that it works properly. I just can't seem to find where the problem lies. I have striped down the coding so that it would not take up so much space. The idea of this is to have a heading with an arrow in the right side to drop down this box with 3 images with a link under each one for each line.
Thanks for your help in advance.

http://jsfiddle.net/QXSXC/
remove the onclick
<a href="#newark" >
and use jQuery:
$('#newark').click(function() {
document.getElementById("toggleMe10").style.display == "none";
if(document.getElementById("toggleMe10").style.display == "none" ) {
document.getElementById("toggleMe10").style.display = "inline";
document.getElementById("toggleMe10").style.visibility = "visible";
document.getElementById("arrow10").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe10").style.display = "none";
document.getElementById("arrow10").style.background = "url(img/down.png) no-repeat";
}
});
You can assign a handler to #newarkwith pure JS google it if you can't use jQuery

how to set tooltip using javascript in asp.net?

I have a text box in my aspx page. I need show its tooltip when and only when the text box is disabled/greyed out. How do I achieve this using JavaScript?

You can call this function where you enable/disable the textbox
function setToolTip()
{
if(document.getElementById("myTextBox").disabled == true)
{
document.getElementById("myTextBox").title="ToolTip";
}
else
{
document.getElementById("myTextBox").title="";
}
}

Here is one way:
document.getElementById("<%=TextBox.ClientID%>").setAttribute('title','New Tooltip');
2nd way:
function DisplayToolTip()
{
document.getElementById('divToolTip').style.left = window.event.x;
document.getElementById('divToolTip').style.top = window.event.y;
document.getElementById('divToolTip').style.visibility = 'visible';
}
function HideToolTip()
{
document.getElementById('divToolTip').style.visibility = 'hidden';
}
Now add the below HTML markup code:
<span id="spanName" style="font-weight: bold;border: solid 2px red;"
onmouseover="javascript:DisplayToolTip();"
onmouseout="javascript:HideToolTip();">THIS IS THE SPAN
</span>
<div id="divToolTip" style="position: absolute; visibility: hidden;
z-index: 20; background-color: white; border: solid 1px Blue;">
This is ToolTip Text
</div>