I have a menu and I can open and close the menu clicking on a tag. It works.
Also I use OnBlur(). Actually it works too but When I click a div in the menu, OnBlur active, menu closes and div's onclick doesn't works. How can I fix this problem ?
In JavaScript Codes;
<script>
function Acc_Show() {
var q = document.getElementById("he-my");
q.style.display = "";
document.getElementById("my-account-btn").focus();
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Hide()");
}
function Acc_Hide() {
var q = document.getElementById("he-my");
q.style.display = "none";
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Show()");
}
</script>
In HTML codes;
<a id="my-account-btn" href="javascript:;" onclick="Acc_Show()" onblur="Acc_Hide()">My Account</a>
My Menu's Image;
http://i.stack.imgur.com/OMg6n.png
UPDATES Additional Codes From OP:
<div class="he-myac" id="he-my" style="display:none;">
<div id="my-account-wrapper">
<div class="myaccount" onclick="GoAdress('test.aspx')">Test</div>
<br/>
<div class="myaccount" onclick="GoAdress('settings.aspx')" >Settings</div>
<br/>
<div class="myaccount" onclick="GoAdress('log_out.aspx')">Log Out</div>
</div>
I have a feeling this line q.style.display = ""; in your Acc_Show() function is causing the issue. Try replace it with q.style.display = "block";.
When an onblur event is triggered, your Acc_Hide() function hides your <div> by calling q.style.display = "none";. Then the next click on my-account-btn triggers your Acc_Show() function, which set your q.style.display to an empty string. That doesn't unhide your <div> block.
Related
I want to create a basic page in html that displays a single image.
I also added two buttons Previous and Next. These buttons should allow the user to move forward or backward. Have 6 images in total. When the user reaches the end (or beginning when clicking on the back button) of the slide show, the slide show should not wrap around to the beginning (or end).
button onclick function for both the cases is not working. Its only getting displayed the first image as what mentioned in the img src attribute.
This is what I have done so far. I put all the images into an array and try to travel the array forward and backward side based on the button click.
<body>
<img src="img1.jpg" id="demo" style="width:400px;height:600px"/img>
<br/>
<input type="button" onclick="preImage()" value="Previous
">
<input type="button" onclick = "nextImage()" value="Next
">
<script>
var slider_content = document.getElementById("demo");
var image = ['img1','img2','img3','img4','img5','img6'];
var i = image.length;
function nextImage(){
if(i<image.length){
i=i+1;
}else{
i=1;
}
slider_content.innerHTML="<img src="+image[i-1]+".jpg>";
}
function preImage(){
if(i<image.length+1 && i>1){
i=i-1;
}else{
i=image.length;
}
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
}
</script>
</body>
Create a wrapper div to your image and change the innerHTML of the div.
<div id="demo" style="width:400px;height:600px">
<img src="img1.jpg">
</div>
An error needs to be corrected in the preImage function:
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
to
slider_content.innerHTML = "<img src="+image[i-1]+".jpg>";
and also what Daniel said.
This question already has answers here:
onclick calling hide-div function not working
(3 answers)
Closed 4 years ago.
Im trying to add in a close button for my div. It opens all ok but doesnt close and I cant fathom why ...
The code is here
window.onload = function display() {
document.getElementById("advert").style.display = "block";
}
function close() {
document.getElementById("advert").style.display = "none";
}
<div id="advert">
<div class="advert-content">
<button class="Close" onclick="close()">×</button>
<p>Content is here</p>
</div>
</div>
You can't use "close()" as a function name, it seems to be reserved (which makes kind of sense). Just use another name.
window.onload = function display() {
document.getElementById("advert").style.display = "block";
}
function xclose() {
document.getElementById("advert").style.display = "none";
}
<div id="advert">
<div class="advert-content">
<button class="Close" onclick="xclose()">×</button>
<p>Content is here</p>
</div>
</div>
Window.close() is a reserved word in JavaScript.
The Window.close() method closes the current window, or the window on which it was called.
When you use that name as your function name, that function is actually overridden by Window.close() and nothing happens.
Change your function name from close to some other name.
window.onload = function display() {
document.getElementById("advert").style.display = "block";
}
function closeDiv() {
document.getElementById("advert").style.display = "none";
}
<div id="advert">
<div class="advert-content">
<button class="Close" onclick="closeDiv()">×</button>
<p>Content is here</p>
</div>
</div>
As the other answers have mentioned close is a reserved word, but that only seems to apply to inline JS. You can move the code for the event listener outside of the HTML and still use close as your function name. As an added benefit not-including JS in your HTML is considered good practice.
const button = document.querySelector('.close');
button.addEventListener('click', close, false);
function close() {
document.getElementById("advert").style.display = "none";
}
<div id="advert">
<div class="advert-content">
<button class="close">×</button>
<p>Content is here</p>
</div>
</div>
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)
Oke, so I am trying to create an interactive menu.
Now I am really struggling to make the JavaScript access the child nodes of a div and change a specific css element.
The html code goes as follow:
<div id="navbar">
Control panel
<div class="button" onclick="openMe(self);">
Users
<div class="sub-button">
Profile
</div>
<div class="sub-button">
Ban
</div>
</div>
<div class="button">
Roles
<div class="sub-button">
Profile
</div>
<div class="sub-button">
Ban
</div>
</div>
</div>
And the JavaScript is :
function openMe(a)
{
child = a.document.getElementsByClassName('sub-button');
console.log("a is "+a);
console.log("child is "+$(child).get());
console.log(self);
for (i = 0; i < child.length; i++){
//
console.log("Key "+i+" is "+child[i]);
console.log("Display for "+i+" is "+child[i].style.display);
if (child[i].style.display == "" || child[i].style.display == "none"){
child[i].style.display = "block";
} else {
child[i].style.display = "none";
}
}
}
In the css sub-button is hidden.
Now I have been trying to google, but I haven't found anything even close.
How can I make it that if I press button, the sub-buttons within button change css elements?
gr,
Angels
edit :
jsfiddle http://jsfiddle.net/r7tzr6dm/
The error is in the first line. When you would open the error console, a error message will occur.
Change the line a.document.getElementsByClassName('sub-button'); to a.getElementsByClassName('sub-button');.
The second error is change onclick="openMe(self); to onclick="openMe(this);.
here's my HTML:
<body>
<div class="container">
<img src="2.png" />
<div id="colorChange"></div>
</div>
<div class="colorChoice">
<form id="colorChoiceForm">
<ul id="colorListParent">
<li class="noButton">
<input type="radio" name="colorGroup" value="aaa12" id="aaa12" />
<label style="background-color:#d21212" class="colorPick" for="aaa12"></label>
</li>
<li class="noButton">
<input type="radio" name="colorGroup" value="daaa" id="daaa"/>
<label style="background-color:#202020" class="colorPick" for="daaa"></label>
</li>
</ul>
</form>
</div>>
</body>
and JS:
function load() {
document.getElementById("colorListParent").addEventListener("click", function(e){
var bgrColor = (e.target.style.backgroundColor);
console.log(bgrColor);
console.log(typeof bgrColor);
document.getElementById("colorChange").style.backgroundColor = bgrColor;
});
}
window.onload = load;
Until I binded labels with buttons with for/id script worked - bby that I mean background color of #colorChange changed to color of clicked label.
Now var bgrColor returns two strings - first one of them is color I need, but the second one is empty and color of #colorChange doesn't change.
Where's problem?
Once you start using label[for], you'll have to approach it in a different way because your "click" event will be fired twice - once for the label and once for the radio button (which gets selected automatically. Here is a working fiddle and below is the changed JS code.
function load() {
document.getElementById("colorListParent").addEventListener("click", function(e){
//alert(e.target.id);
if(e.target.id) {
var selector = 'label[for=' + e.target.id + ']';
var label = document.querySelector(selector);
var bgrColor = label.style.backgroundColor;
//alert(bgrColor);
//alert(typeof bgrColor);
document.getElementById("colorChange").style.backgroundColor = bgrColor;
}
});
}
window.onload = load;
when you are clicking the label, the 'input' DOM element is clicked as well, so you basically have 2 'click' events.
try adding something like that:
if(bgrColor && bgrColor.length>0){
document.getElementById("colorChange").style.backgroundColor = bgrColor;
}