I have a div navigation, inside this div is a div login. I use javascript that displays divs login_name_field, login_pw_field, register_btn, do_login_btn, hide_login and hides the div login when I click the login div.
The hide_login div, when clicked hides all the newly displayed divs including itself and displays the original login div. It all works like a charm, but I would like to have one more function that does the same as hide_login but is triggered by clicking anywhere outside the main navigation div. I tried to adjust my code, but I am getting is not defined error on the new clicked vars.
Please have a look at the code below. Thank you all for reading and in advance for the replies :) Have a nice holiday.
$( "#login_btn" ).click(function() {
$('#login_name_field').toggle()
$('#login_pw_field').toggle()
$('#register_btn').toggle()
$('#login_btn').toggle()
$('#do_login_btn').toggle()
$('#hide_login').toggle()
var loginClicked = 1;
});
$( "#hide_login" ).click(function() {
$('#login_name_field').toggle()
$('#login_pw_field').toggle()
$('#register_btn').toggle()
$('#login_btn').toggle()
$('#do_login_btn').toggle()
$('#hide_login').toggle()
var loginClicked = 0;
});
$( "#navigation_bar" ).not().click(function() {
if(loginClicked == 1){
$( "#hide_login" ).click();
}
});
<div id="navigation_bar">
<!-- DO Login BTN -> runs the login function -->
<div id="do_login_btn" class="do_button" style="display: none;">
<input type="submit" id="nav_btn" name="whatever" value="Log In!">
</div>
<!-- Hide Login BTN -->
<div id="hide_login" class="hide_button" style="display: none;">
</div>
<!-- Login PW field -> input for login query -->
<div id="login_pw_field" class="button" style="display: none;">
<div id="field_div">
<input type="password" name="login_pw_field" value="password" class="p_reset" id="password">
</div>
</div>
<!-- Login NAME/Email field -> input for login query -->
<div id="login_name_field" class="button" style="display: none;">
<div id="field_div">
<input type="text" class="n_reset" name="login_name_field" id="name" value="Name / Email"></input>
</div>
</div>
<!-- Register BTN -> forwards to Account Recovery Page -->
<div id="acc_rec_btn" class="button" style="display: none;">
<p id="center">Account Recovery</p>
</div>
<!-- Login BTN -> displays Login NAME & PW fields, DO Login BTN, Register BTN -->
<div id="login_btn" class="button" style="display: block;">
<p id="center">Log In</p>
</div>
</div>
Also it appears that the $( "#navigation_bar" ).not().click(function() only triggers when I am clicking inside the navigation_bat div instead of outside of it. I thought the not() takes care of that. Well, let me know what you think :)
According to your advices I have the code working now and it looks like this:
$( "#login_btn" ).click(function() {
$('#login_name_field, #login_pw_field, #register_btn, #login_btn, #do_login_btn, #hide_login').toggle()
});
$( "#hide_login" ).click(function() {
$('#login_name_field, #login_pw_field, #register_btn, #acc_rec_btn, #login_btn, #do_login_btn, #hide_login').css("display", "none")
$('#login_btn').css("display", "block");
});
$(document).mouseup(function (e)
{
var container = $("#navigation_bar");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$( "#hide_login" ).click();
}
});
I have also adjusted the hide_login function. The way it was implemented before with the new solution when I kept clicking outside the navigation_bar div it keep displaying and hiding the elements instead just hiding them when they are already displayed. Now it works perfectly.
Related
I'm trying to create a list of links that update the content in a div when clicked.
Looking at the code below, I want the div with id container to be populated with the content of the relevant div when a link is clicked.
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('food');"></a>
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('water');"></a>
<div id="food" style="height:20px;">Clicking Food Link Shows this in Div</div>
<div id="water" style="height:20px;">Clicking Water Link Shows this in Div</div>
<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>
I hope this is enough information. I'm basically trying to make the content of hidden divs (food & water) display in the container div when clicking a link.
This script should work.
function fixScroll(id) {
var text = document.getElementById(id).innerHTML;
document.getElementById("container").innerHTML = text;
}
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('food');">Food</a>
<a class="glyphicon glyphicon-cutlery" onclick="fixScroll('water');">Water</a>
<div id="food" style="display: none; height:20px;">Clicking Food Link Shows this in Div</div>
<div id="water" style="display: none; height:20px;">Clicking Water Link Shows this in Div</div>
<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>
Keeping it simple, you can add this below your other HTML (as the last element inside your body element):
<script>
const container = document.querySelector("#container");
function food(){
const foodText = document.querySelector("#food").innerHTML;
container.innerHTML = foodText;
}
function water(){
const waterText = document.querySelector("#water").innerHTML;
container.innerHTML = waterText;
}
</script>
You can improve on this by
1) putting the script in an external file and referencing it from your page, and/or
2) combining the two functions into one by giving it a parameter name (like myText) inside the parentheses, and using that parameter in place of foodText inside the function. Then when you call the function, instead of just saying food(), you would say myCombinedFunctionName(foodText).
Edited to use pure JS without jQuery:
var btn = document.querySelectorAll('.classNameYouLike');
for (var i in btn) {
btn[i].onclick = function(e) {
e.preventDefault();
document.querySelector('#container').innerHTML = document.querySelector(e.target.getAttribute('data-source')).innerHTML;
};
}
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#food">food</a>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#water">water</a>
<div id="food" style="display:none;">Clicking Food Link Shows this in Div</div>
<div id="water" style="display:none;">Clicking Water Link Shows this in Div</div>
<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>
Original jQuery-powered solution:
$('.classNameYouLike').on('click', function(e) {
e.preventDefault();
$('#container').html($($(this).data('source')).html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#food">food</a>
<a class="glyphicon glyphicon-cutlery classNameYouLike" data-source="#water">water</a>
<div id="food" style="display:none;">Clicking Food Link Shows this in Div</div>
<div id="water" style="display:none;">Clicking Water Link Shows this in Div</div>
<div id="container" style="width:100%; height:150px;">This Div box is Empty till you click one the links, then its Populated by the correct stuff</div>
I have the following problem, I would like to create a few spoilers. This has worked so far, but I would like that if a spoiler is open and one clicks on another, the opened again closes.
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
<div id="spoiler" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>
<div id="spoiler2" style="display:none">
Content2
</div>
Assign a common class to all spoilers and on click hide the contents of all the spoilers using the class name and simply show only the one you want to show:
I have created a function for this like so:
<script>
function showSpoiler(spoilerId)
{
var spoilers = document.getElementsByClassName('spoilers');
for(var i=0;i<spoilers.length; i++)
{
spoilers[i].style.display = "none";
}
document.getElementById(spoilerId).style.display = "block";
}
</script>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler');">Show/hide</button>
<div id="spoiler" class="spoilers" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler2');">Show/hide</button>
<div id="spoiler2" class="spoilers" style="display:none">
Content2
</div>
spoilers is the common class which needs to be hidden before showing the specific one.
Remember
getElementsByClassName() gives out an array that is why the for loop is in place.
To make it easier for you to start, I'll give you an example made for Event Listener for Radio buttons.
code:
document.getElementById("type_test").addEventListener("click", functio_test);
document.getElementById("type_test1").addEventListener("click", functio_test);
function functio_test(){
var x = document.querySelector('input[name="type_test"]:checked').value;
//var x = document.forms[0].elements.type_test.value;
if(x == "ola"){
alert("Ola José");
document.getElementById('disp_0').style.display = 'block';
document.getElementById('disp_1').style.display = 'none';
}
else if(x == "adeus"){
alert("Adeus José");
document.getElementById('disp_1').style.display = 'block';
document.getElementById('disp_0').style.display = 'none';
}
else {
alert("Continua José");
}
}
<div id="select_0">
<br> <input id = "type_test" type="radio" name="type_test" value="ola"> ola
<input id = "type_test1" type="radio" name="type_test" value="adeus"> adeus <br/> <br><br/>
</div>
<div id="disp_0" style="display:none">
<input type="text" name="lastname" value="ola Jose" ><br><br/>
</div>
<div id="disp_1" style="display:none">
<input type="text" name="lastname1" value="Adeus Jose" ><br><br/>
</div>
I hope the post helps you.
you can use classes to accomplish this (class="spoilers")
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler')"> Show/hide </button>
<div id="spoiler" style="display:none" class="spoilers">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler2')"> Show/hide </button>
<div id="spoiler2" style="display:none" class="spoilers">
Content2
</div>
<script>
function toggleSpoiler(id) {
var spoilers = document.getElementsByClassName("spoilers");
for(var i = 0; i < spoilers.length; i++) {
if (spoilers[i].id != id) {
spoilers[i].style.display = "none";
}
}
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='';
} else {
document.getElementById(id).style.display='none';
}
}
</script>
The way I would do this would be to create two additional classes and add an additional div to use the parent/child association to determine which spoiler (in relation to the button) needs to be displayed.
Starting off with the classes, let's call them
.spoiler
and
.active
The idea is to make the .spoiler class hide and the .active class show, like so:
.spoiler {
display:none;
}
.spoiler.active {
display:block;
}
All spoiler elements would have .spoiler as a class and only the currently active spoiler would have the .active class, now let's create our new div which will bundle the spoilers and their buttons to have a common parent.
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content
</div>
</div>
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content2
</div>
</div>
Now we can use the relative "spoiler-item" class when a button is pressed to determine which spoiler is related to the button being pressed and also remove the "active" class from all other "spoiler" elements to make sure only one spoiler is shown at a time.
I recommend using jQuery for this, due to time constraints I'm not going to be able to do it in pure JS.
$(document).ready(function() {
$('.spoiler-item button').click(function(e) {
if($(this).parent('.spoiler-item').find('.spoiler').hasClass('active')) { // If the item we've selected is already active
$(this).parent('.spoiler-item').find('.spoiler').removeClass('active');
return;
}
$('.spoiler.active').removeClass('active'); // Close all open spoilers
$(this).parent('.spoiler-item').find('.spoiler').addClass('active'); // Open relative spoiler
});
});
See JSFiddle for working answer: https://jsfiddle.net/vvm4xe0m
I am using bs-tabs + AngularJS
Code is as follows:
<div bs-tabs>
<div data-title="Tab1">
....
</div>
<div data-title="Tab2">
....
</div>
<div data-title="Tab3">
....
</div>
</div>
I need to hide these tabs dynamically based on some event, say for example:
if hidden==true then hide it
i.e.
<div data-title="Tab1" ng-if="hidden">
....
</div>
<div data-title="Tab2">
....
</div>
<div data-title="Tab3">
....
</div>
<input type="button" ng-click="hideTab()" />
$scope.hidden = true;
$scope.hideTab = function(){
$scope.hidden = false;
}
Initially hidden is set to true, which loads all three tabs. Later user triggers a click event which changes hidden to false resulting in tab1 to be hidden but Tab1 is not hiding.
Is there anyway we can hide bs-tabs dynamically?
Thanks in Advance
Het guys,
im begginer using JQuery and the stuff is i have some displayed elements in divs.
this is the we site source:
<div id="application-list" class="row boxes">
<h1>nowa3</h1>
<div class="box col-md-4" id="Acrobat Reader 10">
<div class="thumbnail">
<div class="caption">
<h3><img class="icon" src="/Acrobat%20Reader%2010.png" alt="Acrobat Reader 10" /> Acrobat Reader 10</h3>
<div class="row">
<div class="pull-right"> <a data-toggle="modal-loading" data-target="#application-launching-modal" target="application-launcher" href="/Acrobat%20Reader%2010.ica" class="btn btn-sm btn-primary">Run</a>
</div>
</div>
</div>
</div>
</div>
</div>
and i want to do search function. i did put input fild and submit button and i setup code like this:
$(document).ready(function() {
$('#button').click(function () {
var value = $('#appName').val();
$('.col-md-4').each(function() {
if ($(this).contains($(this), value)) {
$(this).show();
}
else $(this).hide();
});
});
});
where #button its the id of subbmit button, #appName is the id of input field and .col-md-4 is the class of divs i want to hide show when searching ?
It doesnt work when i want alert $(this).id it show nothing button click alert the value entered. whats wrong ?
<input type="text" id="appName"><button type="submit" id="button">Find</button>
its before:
<div id="application-list" class="row boxes">
jQuery .contains() checks if one element is a descendant of another element, and does not check if strings exists in an element, you should use indexOf() for that
$('#button').click(function () {
var value = $('#appName').val();
$('.col-md-4').each(function() {
if ( $(this).text().indexOf(value) != -1 ) {
$(this).show();
} else {
$(this).hide();
}
});
});
or the :contains psuedo selector, which is not the same as .contains()
$('#button').click(function () {
var value = $('#appName').val();
$('.col-md-4').hide().filter(':contains('+value+')').show();
});
I've got a function that, when you click in a textarea, it will slide down a button.
However, I have multiple textareas on the page with the same class and the problem is that if you click on any of the textareas, all of them will slide down the button.
How can I make it so that it only slides down on the textarea element that you click on, and not the others?
Here's a quick JSFiddle I made: http://jsfiddle.net/MgcDU/6100/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
JavaScript:
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
Have to find the elements relative to the element that was clicked.
$(this) is the element that was clicked, and siblings() finds elements that are siblings.
http://jsfiddle.net/P9nMq/
$("textarea").click(function(){
$(this).siblings('.btn-toggle').slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(this).find('.btn-toggle').slideUp();
}
});
How about instead of relying on a class lookup, use the event target:
$("textarea").click(function(evtTarget){
$(evtTarget.target).parent().find($(".btn-toggle")).slideDown();
});
http://jsfiddle.net/paulprogrammer/MgcDU/6103/
The following snippet selects all the buttons:
$(".btn-toggle").slideUp();
You should replace it with this:
$(this).siblings(".btn-toggle").slideUp();
Update
I would rewrite your script with these lines :
$(".well").('focus blur', "textarea", function(e){
$(this)
.siblings(".btn-toggle")
.stop(true, true)
.slideToggle();
});
The advantage is that you delegate the events on the same parent of the two targeted elements and that you do not rely on any click event handlers.