I need a function that hide the div if i click outside of the div area ?
I have defined a Div on Position: none, which I make visible by using the following function:
My Div:
<div id="TopBarBoxInfo1" onclick="showSerachOptions('BoxBox');" >
</div>
My function:
function showSerachOptions(element){
var element = document.getElementById(element);
// And then it will change what it is
if(element.id == 'Box'){
if(element.style.display == 'none'){
element.style.display = 'block';
}
else{
element.style.display = 'none';
}
}
}
Now I would need a function, which allows to close the div if you click with the mouse pointer outside of the area of the div. Please describe your solution in detail, because I am a beginner!
Since being registered doesn't mean knowing the rules i'm going to answer your question BUT you should always ask in english.
var body = document.getElementsByTagName('body')[0];
body.click = function(e){
//here you can get e.target as the click-target-element or
// e.srcElement(Microsoft) as the click-target-element
//than you can handle what you want to do since e.target/srcElement will give you
// an element (just like document.getElementById
}
remember the .click may not be the best way - addEventListener would be much better afaik
Related
I created an <img/> element from js and i want it to appear only when mouseover
The callback function makesVisible() is actually called but nothing is change.
I would like to change visibility from hidden to visible
var imgHover = document.createElement('img');
imgHover.setAttribute("src", "img/icona_play.jpg");
imgHover.style.width = "30px";
imgHover.style.height = "23px";
imgHover.style.position = "absolute";
imgHover.style.margin = "0 auto";
imgHover.style.left = "45px";
imgHover.style.bottom = "35px";
//I want to change this following property
imgHover.style.visibility = "hidden";
imgContainer.appendChild(imgHover);
//Calling the function when mouseover
imgContainer.addEventListener("mouseover", makeVisible, false);
function makeVisible()
{
imgHover.style.visibility = "visible";
}
You have an option of using an opacity property instead.
Initially set it like so: imgHover.style.opacity = 0;
Than in the makeVisible method change it to imgHover.style.opacity = 1;
Another solution to this problem would be setting addEventListener method on the container div. Assuming that you can have a container around the image with exactly the same dimensions as the Image.
For example:
imgContainer.addEventListener("mouseover", makeVisible, false);
The thing is that opacity and visibility will act the same in a sense of not collapsing the space that the element should occupy. What is different though that hidden element will ignore mouse/pointer events.
Your code works as it should provided that you set up a valid reference to imgContainer and that you set a valid path to an image for the dynamically created element:
var imgContainer = document.getElementById("container");
var imgHover = document.createElement('img');
imgHover.setAttribute("src", "https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png");
imgHover.style.width = "30px";
imgHover.style.height = "23px";
imgHover.style.position = "absolute";
imgHover.style.margin = "0 auto";
imgHover.style.left = "45px";
imgHover.style.bottom = "35px";
imgHover.style.visibility = "hidden";
imgContainer.appendChild(imgHover);
imgContainer.addEventListener("mouseover", makeVisible, false);
function makeVisible(){
imgHover.style.visibility = "visible";
}
<div id="container">Hover Over Me</div>
Having said that, you should avoid setting inline styles on elements as they are hard to override when needed and they often cause duplication of code. It's much simpler to set up CSS classes ahead of time and just apply/remove those classes as needed with the element.classList API.
Also, visibility does affect whether you see an element or not, but even when you don't see it, space is allocated in the UI for it, which isn't always desirable. In most cases, using a display:none to hide an element and then simply removing that instruction to show the element is the better approach.
Lastly, while using setAttribute() is certainly valid, you can also configure your elements via their direct properties. Almost all HTML attributes map to a corresponding JavaScript object property. Using these can make the code much simpler.
Take a look at an example that puts all this together:
var imgContainer = document.getElementById("container");
var imgHover = document.createElement('img');
// Just set properties of the element directly:
imgHover.src ="https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png";
// Just add pre-made classes to style the element
imgHover.classList.add("hoverImg");
imgHover.classList.add("hidden");
imgContainer.appendChild(imgHover);
imgContainer.addEventListener("mouseover", makeVisible);
function makeVisible(){
imgHover.classList.remove("hidden");;
}
.hidden { display:none; } /* Used when an element needs to be hidden */
/* This will be applied via JS */
.hoverImg {
width:30px;
height:23px;
position: absolute;
margin:0 auto;
left:45px;
bottom:35px;
}
<div id="container">Hover Over Me</div>
Here you were appending element like this
imgContainer.appendChild(imgHover);
So reference for imgHover element in dom will get
change. Fetch that element once again inside
makeVisible() function.
document.querySelector("img") // use your appropriate.
I'm trying to make when some presses a button that only one div is visible at a time. So when they click another button, that corresponding div pops up and the last one hides.
I've tried a for loop:
function display(x) {
for (i=0; i<content.length; i++){
content[i].style.display = 'none';
}
if(x = content[i]){
x.style.display = 'inline';
}
}
This didn't do anything.
I tried nesting the if statement inside the loop, but it caused all to be visible.
I've linked the jsfiddle below.
Please no jQuery answers as I'm trying to learn pure javascript first.
Thanks in advance.
https://jsfiddle.net/ethacker/rp59g9cf/
You are not putting the if inside the loop. Therefore, it will only check the last value of i. Also, the equals should be ==. You should do it like this:
function display(x) {
for (i=0; i<content.length; i++){
if(x == content[i]){
x.style.display = 'inline';
} else {
content[i].style.display = 'none';
}
}
}
see this fiddle example code I slightly modified your code
var currDisplayElm;
//function
function display(content) {
if(currDisplayElm)
currDisplayElm.style.display = 'none';
currDisplayElm = content;
content.style.display = 'inline';
}
As I understand.
Ithink If you call function on click of button then set div Id in sequence and you should pass thet div no which you want to display.
And div name must be same then you can hide other div.
I hope you understand ..
I have a simple form (text field and submit button). I am trying to have the user submit a number, and the resulting number will display one div (from a set of divs).
I tried using this example as a base (when the user clicks a link, it shows a div, but hides others).
My test is below:
var divState = {};
function showhide(oFrm) {
var dividnum = oFrm.Inputed.value;
var prepar = "para";
var divid = prepar + theInput; /* should result in something like "para52" */
divState[divid] = (divState[divid]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != divid){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
http://jsfiddle.net/LfzYc/431/
Note: I am NOT proficient in JavaScript at all, which is why I am having difficulty.
Also, I'd like to add a function ... if the number entered is not between 1-4, show a different div, maybe with the id paraEnd.
Please look at the jsFiddle based on your one. I hope I've done what you want. I changed the showhide function and your HTML (fixed div's IDs and added one more div#paraEnd). I'd suggest you refactoring your code.
You should use jQuery to have an easy way to manipulate the DOM.
Using jQuery I made an example for you, just change your JS and paste mine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
// get the paragraphs
var paragraphs = $('.paragraph');
// form submit
$('#paragraphform').submit(function (e) {
// prevent the event to flow
e.preventDefault();
// get the input value
var value = $('#Inputed').val() - 1;
// reset all divs removing active css class
paragraphs.removeClass('active');
$('.error').removeClass('active');
// verify if the value doens't exist
if(value < 0 || value > paragraphs.length - 1) {
$('.error').addClass('active');
return;
}
// show the active div
paragraphs.eq(value).addClass('active');
});
})(jQuery);
</script>
Is that what you need?
If you not familiar with jQuery, this is the jquery Learn Center:
https://learn.jquery.com/
And this is a nice tutorial for beginners:
http://www.tutorialspoint.com/jquery/
I want to hide tags with a specific id or class using javascript. I have kept a single ID and CLASS for every span tag called "ch"(adding different ID and CLASS to each span is very difficult for me)
I have a checkbox which will toggle the visibility of the .
Now here's the problem:
- I click the checkbox once, everything hides fine
- Click it the second time(to show the again), all the content in the tag goes to the left of the screen.
- Click it again and everything goes berserk
I want the code to show/hide the span tags when clicked and when the spans are hidden, I don't want that line to remain there. I want that entire line to be removed, and when it's set for visible again, I want these lines to reappear. I hope someone can help me. Below is the code:
function sh_chords() {
tmp_log += "sh_c|";
var b = document.getElementById("showing_chords").checked;
for (i = 1; i <= lcnt; i++) {
el = document.getElementById("ch");
try {
if (!b) {
el.style.color = "black";
el.style.cursor = "default";
$(".ch").hide();
} else {
el.style.color = "#0000FF";
el.style.cursor = "pointer"
$(".ch").show();
}
} catch (d) {}
}
}
Since you are using jquery, you can use it's helper function which is specifically for toggling visibility.
$('.ch').toggle( $('#showing_chords').prop('checked') );
So, I need a div to slide up when another slides down.
Example:
When Home button is clicked a div, we'll call it box_Home, slides down. When Games button is clicked, box_Home should slide up and then box_Games should slide down. What's happening is that they are overlapping instead of swapping out.
http://jsfiddle.net/M8UgQ/15/
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e) {
e.preventDefault();
var $this = $(this),
speed = 500;
var link_id = $this.attr('id');
var box_id = '#box_' + link_id;
console.log(box_id);
if($this.hasClass('active') === true) {
$this.removeClass('active');
$(box_id).slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active');
$(box_id).slideDown(speed);
} else {
a.removeClass('active')
$(box_id).slideUp(speed);
$this.addClass('active');
$(box_id).delay(speed).slideDown(speed);
}
});
take a look at this
http://jsfiddle.net/rWrJ9/1/
the main idea is...
if the element clicked is active, remove it, otherwise: 1. find (if any) already active elements (using $('.active')) and use jQuery.map() to make them inactive and slide them up, and 2. make the element clicked active.
I also removed the unneeded variable a
IMPORTANT: the this inside the map() function is different from the this (or rather, $this as you called it) outside the map() function
I think you're saying you have two buttons id="Home" class="open" and id="Game" class="open", and two divs id="box_Home" and id="box_Game". If so, you add class="box" to box_Home and box_Game and do something like this:
$('.open').click(function(e) {
e.preventDefault();
var $this = $(this);
var link_id = $this.attr('id');
var box_id = '#box_' + link_id;
$('.box').slideUp();
$(box_id).slideDown();
});
Hi check this fiddle i hope you need thing to implement
jsfiddle
in the if else statement you are doing a mistake
else if(a.hasClass('active') === false) {
replace it with
else if($this.hasClass('active') === false) {