I am new to front-end. Now, Here I have 3 divs which will be on the same page.and the position will also be same. it is like toggling .
So at the start this will be the div that I will show
<div text-angular id="htmlEditorId" >Abc</div>
then there is button whick is like
<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>
On click of that button
<div text-angular id="secon">abcd</div>
this div should be shown and not the previous one.
And on again click of that button a third div
<div text-angular id="third">azzzbcd</div>
this should be seen and again on click first one should show . Its like a round robin fashion .
Now what I tried is using ng-show and ng-if. Can any one help me with this?
$scope.changeTab = function() {
$scope.showfirst = true;
$scope.showsecond = false;
}
It's quite simple, you can do it in many ways, for example:
In the controller
Define a scoped variable (bindable with the front-end)
$scope.showView = "firstView"
Define also a function:
$scope.changeView = function(value) {
$scope.showView = value;
}
In the html page define your divs and button
<button ng-click="changeView('secondView')">Chage View</button>
<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>
Related
I want to hide div after clicking on close button in Angular 6 and other want to change the other div class.
For example other div class is col-sm-7, once close button clicked it will change to col-sm-12.
In my component.html
<div id="custom-div">
<button class="close" type="button" click="featureHide()">X</button>
</div>
<div id="another-div" class="col-sm-7"></div>
In my component.ts
featureHide() {
document.getElementById('custom-div').style.display='none';
var element = document.getElementById("another-div");
element.classList.add("col-sm-12");
}
But its not working, please suggest.
I suggest to use Angular [ngClass] directive instead:
Here a stackblitz working example (remember to expand the browser tab to exceed the sm breakpoint)
//Apply [hidden] to hide the button
<div id="custom-div" [hidden]="!isShow" >
// Use '(click)' instead of 'click'
<button class="close" type="button" (click)="featureHide()">X</button>
</div>
//Apply [ngClass] directive
<div id="another-div" [ngClass]="{'col-sm-7': isShow , 'col-sm-12': !isShow }"></div>
In your ts file:
isShow = true;
featureHide() {
this.isShow= false;
};
It can also be done the way you tried, but change click to (click) first, then in your ts:
featureHide() {
document.getElementById('custom-div').style.display = 'none';
const element = document.getElementById("another-div");
element.classList.remove("col-sm-7");
element.classList.add("col-sm-12");
}
Your approach is wrong in angular. Try avoiding document.xxx use angular.xxx.
Please find the below code
In component.html
<div id="custom-div">
<button class="close" type="button" (click)="featureHide()">X</button>
</div>
<div *ngIf="hideFalg" id="another-div" class="col-sm-7"></div>
In my component.ts
hideFalg:Boolean = true
featureHide()
{
this.hideFalg = false; // this code will hide the div element since we have added the *ngIf
}
To display div
showDiv(){
this.hideFalg = true;
}
I have two buttons, both without links, and want to add a link to one when the other is clicked. How can I make one button with an onclick give a link attribute to something else on the page? If not a button, maybe a div?
The following is my current code:
<div class="container">
<div class="jumbotron" style="background-color:#000000 !important;">
<img id="myImage" src="images/closed.png" style="width:100%">
<p id="texthere"></p>
<div class="container">
<div class="row">
<div class="col">
<button onclick="document.getElementById('myImage').src='images/open.png'" class="btn btn-primary active btn-block">Open Eyes</button>
</div>
<div class="col">
<button onclick="document.getElementById('myImage').src='images/closed.png'"class="btn btn-primary active btn-block">Close eyes</button>
</div>
</div>
</div>
Thank you in advance for your help.
*Edited to clarify and pose as a question.
I think you may be confused about how HTML links work. HTML has the a tag for elements that a user can click to go to a different URL. The (worse) alternative is to use an onclick handler to redirect the user by setting the value of window.location.
To make a button that creates a link on the page, put a script tag at the bottom of the body that attaches a listener to a button that, when called, places a link on the page.
<script type="text/javascript">
var button = document.getElementById('my-button'); // This button has to exist.
button.addEventListener('click', function() {
var link = document.createElement('a');
link.href = 'google.com'; // Or wherever you want the link to point.
document.body.appendChild(link);
});
</script>
While there are many ways to do what you want, without knowing what programming skills you have and what you want to see on the screen, perhaps this sort of structure would help you. Replace your current onclick handlers on the BUTTONs:
<button id="open" class="btn btn-primary active btn-block">Open Eyes</button>
<button id="close" class="btn btn-primary active btn-block">Close eyes</button>
<script>
document.getElementById("open").addEventListener("click", function() {
changeState('open');
});
document.getElementById("close").addEventListener("click", function() {
changeState('closed')
});
function changeState(state) {
document.getElementById("myImage").src = 'images/' + state + '.png';
var new_para = document.createElement("p");
var new_link = document.createElement("a");
new_link.setAttribute("href", "https://www.google.com/search?" + state);
var new_link_text = document.createTextNode("Search for '" + state + "'");
new_link.appendChild(new_link_text);
new_para.appendChild(new_link);
document.body.appendChild(new_para);
}
</script>
I have a modal with a grid of buttons representing different html components. When one of the buttons is pressed, some html is supposed to be injected into the page once the modal closes. However, I'm having trouble targeting the specific column where the html is to be injected. Here's my code:
<div class="row" id="newRow">
<div class="col-md-12 column">
<button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
</div>
</div>
And in my js file I have some code to assign an id to the column div (since there could potentially be many columns with this addElement button) that looks like this:
...
$(this).parent().next().children().find('.column').assignId();
...
Up to this point, everything works well. I'm having no trouble getting the column a unique id (defined in my assignId() function).
As I mentioned, the addElement button gets clicked, opening a modal which is when this code is executed:
$(document).on('click', 'button.addElement', function (e) {
e.preventDefault();
$('#add-element').modal('show').draggable();
var col = $('button.addElement').parent();
// debugging in the browser verifies that the colId
// successfully stores the id attribute for the column
var colId = col.attr('id');
addElements(colId);
});
...
function addElements(colId) {
$('#insert-paragraph').on('click', function () {
var html_content = '<div class="box" data-type="paragraph">...</div>';
$("#newRow").find("#"+colId).html(html_content)
$('#add-element').modal('hide');
});
}
It's on this line: $("#newRow").find(colId).html(html_content); that I'm having the issue. My guess is that the formatting for find(...) is wrong and that I can't just insert a variable like that, but I've tried a few different things and nothing seems to be working.
Any help is very much appreciated.
Thanks!
UPDATE:
#juvian suggested writing a few of the variables' values to the console:
console.log(colId);
console.log($("#newRow")).length;
console.log($("#newRow").find("#"+colId).length);
console.log($("#newRow").find("#"+colId).html());
I logged these values twice. First, just before passing colId into the addElements function and in the addElements function immediately after $(#newRow").find("#"+colId).html(html_content); The results of those two tests are as follows:
Values prior to running addElements:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>
Values after the insert-paragraph button is pressed:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>
Interestingly enough, it appears like everything is working like I'd expect it to, however, when it's all said and done, the addElement button remains and the page still renders this:
<div id="newRow" class="row clearfix">
<div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
<button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
<i class="fa fa-plus fa-3x add-item"></i>
</button>
</div>
</div>
.find as most jquery functions, takes a css selector as parametre. Unfortunately, colId is just a string, so it matches no elements (unless colId is html, span or something like that)
You are just missing adding the id selector at the beginning to do an id match:
.find("#"+colId)
I guess The parent of button is a div here which has no id.
var col = $('button.addElement').parent();
thus var colId is getting no value.give that div an id and it should be fine.
So I've made a function that, when you click on a button, a certain div comes up with its own content. When clicking on the button again, the div will hide and another div will show up. This div will always show up when none of the other three divs aren't selected.
The problem is when I'm adding an href tag with an anchor link which is connected to each div, that I must click twice on the button before the hidden div will show.
Check fiddle here: http://jsfiddle.net/449r8Lwv/
So as you can see, when you click on one of the buttons, nothing happens except that the url changes which is a good thing. But clicking AGAIN on the same button lets you show the hidden div. This is not what I want, I want the div show up the first time you click on the button already.
Also, when going directly to the url with an anchor name in it, It will immediately show the div with it's content that is connected to the anchor, that's a good thing. But then if you click another button again, it will show the div that must normally show when NONE of the divs aren't selected which is not the case.
Example: You go to url website.com/test.html#2. Then when you click on button 3, then content of the connected div must come("3") up but instead the div(named #text) will come up when that one should only come up if none of the divs that are connected to the buttons arent showing up.
HTML:
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target=".1"><button>1</button></a>
<a class="click" id="showDataInput" data-target=".2"><button>2</button></a>
<a class="click" id="showHistory" data-target=".3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
JavaScript/jQuery
<script>
$(document).ready(function () {
var $targets = $('.target');
$('#clicks .click').click(function () {
var $target = $($(this).data('target')).toggle();
$targets.not($target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none':'')
/*$('#contact_info').toggle(!$targets.is(':visible'));*/
});
});
</script>
<script>
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = $(this).data('target');
doToggle(num);
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
</script>
Thank you a lot.
ps: in the fiddle I only put the second script part because of some issues when I put the other part aswell. If you test it local you should use the whole JavaScript/jQuery part.
Since the URL is changing, you need to put doToggle(..) in the main section of your code.
Another problem is the data-target. jQuery may evaluate the number as a number. So .1 will become 0.1. We can add the . in JS.
<div id="clicks">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
and the JavaScript:
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = '.' + $(this).data('target');
if (num === '.' + location.hash.substring(1)) {
doToggle(num);
}
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
if (location.hash.substring(1).length > 0) {
doToggle('.' + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
Edited:
In you script before, doToggle was working, but after it executed, the url would change, making it look like doToggle wasn't working. The click handler should only perform the toggle if the hash url is the same as the toggled div.
http://jsfiddle.net/449r8Lwv/12/
I'd suggest to remove dots in your data-target attribute.
So, your HTML will look like this:
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target="1"><button>1</button></a>
<a class="click" id="showDataInput" data-target="2"><button>2</button></a>
<a class="click" id="showHistory" data-target="3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
And you can try it here.
Change
$('#clicks .click')
To
$('#clicks.click')
This should solve your problem.
So remove the space in your selector
example: jsfiddle
There is flaw in your code thats why it requires two click to show the div.
Flaw: when user clicks on a link/button say "1" first time both your click and onhashchange handler is getting fired one after another. i.e clickHandler is first display the div 1 which is again gets hidden by your onhashchange handler call.
Next time when you click on same link 'No hashchange will occur' and hence only click handler is getting fired which in turn display the div correctly.
Solution: I suggest you should only use click handler because of the nature of your requirement. Or if it doesn't fit your requirement, you can set global variable to track if one of the event is fired and check its value before calling doToggle in your hashchangehandler.
I have a slew of buttons in different levels within a nested JQuery accordion. This is functioning kind of like a phone book, and when buttons are clicked, numbers are added to a communication tool.
I was hoping to put a button at the top of each sublevel in the accordion that would add all of the rest of the buttons within that sublevel to the "To:" field. I imagine there is an elegant way to do what I would otherwise be accomplishing by brute force in an ugly manner. Thanks!
<div id="accordion-nest">
<h3>First group</h3>
<div>
<button id="allGroupOne">Add all of Group One</button> <-----Button I want
<button id="Guy1">Biff 555-1111</button>
<button id="Guy2">Tagg 555-1112</button>
<button id="Guy3">Mitt 555-1113</button>
......
</div>
<h3>Second group</h3>
<div>
<button id="Guy13">Jeb 555-2222</button>
</div>
<h3>Third group</h3>
<div>
<button id="Guy33">Uncle Jesse 555-99999</button>
</div>
</div>
JS/JQuery
$('button').click(function () {
var last8 = (this.textContent).slice(-8);
if (pageNames == '') {
pageNames = (this.textContent).slice(0, -8);
} else {
pageNames = pageNames + " " + (this.textContent).slice(0, -8);
}
if ($('#pageTo').val() != '') {
$('#pageTo').val($('#pageTo').val()+', '+ areaCode + last8);
} else {
$('#pageTo').val(areaCode+last8);
}
}
I'd add the same class to all the 'Add All' buttons:
<button class="allGroup">Add all of Group One</button>
And would also add the same class to all the other phone buttons:
<button class="phone" id="Guy1">Biff 555-1111</button>
Also, add a class to the divs that contains each group, like this:
<div class="groupContainer">
Then, this would be the jquery when clicking an 'Add all' button:
$(".allGroupOne").click(function(){
var $parent = $(this).closest('.groupContainer'); //The parent div
$parent.find(".phone").trigger('click'); //This simulates each button click
});
That's it!
Cheers