We Keep Coding

Angular swap between 2 different class on click

I am trying to build a toolbar with search functions in angular.
For example :
and this divisions are like:
<div class="toolbar">
<div class="search">search field</div>
<div class="otherElements">
<div class="search-btn"><button>search</button></div>
<div class="bookmark">bookmark_icon</div>
<div class="otherIcons">other icons</div>
</div>
</div>
Here the .search will remain hidden. If i click on search-btn then .search will show up which will cover the whole toolbar. I can hide the div on button click by using [hidden] but the problem is .search doesn't cover the whole place.
Now it is something like :
if I click the search button :
what I want is :
I want the search bar cover the whole .toolbar if search button is pressed.
I have less knowledge of css
Here is a minimal example

Try using Angular ngIf instead of using css classes when trying to show or hide elements depending on some condition, like this:
<div class="toolbar">
<div class="search" *ngIf="!searchItem">search field</div>
<div class="otherElements" *ngIf="searchItem">
<div class="search-btn"><button>search</button></div>
<div class="bookmark">bookmark_icon</div>
<div class="otherIcons">other icons</div>
</div>
In your example, you would also have to put a width 100% on the .input element to make it cover the whole site, like this:
input: { width: 100% }

How to hide div on load of webpage

I have a basic script which shows/hides a div. I'm using this for a drop-down menu.
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I'm looking for the div element to be hidden when the page loads instead of it showing and having to click it to toggle it.
Any help is appreciated!

Use display: none in div like below
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
or you can create a class and assign to the div.
<style>
.hide{
display:none;
}
</style>
<div id="myDIV" class="hide">
This is my DIV element.
</div>

Instead of CSS, you may also use JavaScript to manipulate the display of a web page by taking advantage of events, such as onload.
window.onload = function(){
document.getElementById("myDIV").style.display='none';
};
<div>
This is the first DIV element.
</div>
<div id="myDIV">
This is the 2nd DIV element.
</div>
<div>
This is the last DIV element.
</div>

Using the following methods, you tell the browser to ignore these elements on the page.
Use display none on the element eighter in HTML, or in CSS files.
<div style="display: none">
This is my DIV element.
</div>
Attribute hidden is also helpful.
<div hidden>
This is my DIV element.
</div>

Signature_pad doesn't work when hidden div is shown

I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.
This is my code:
<div class="col-sm-9 col-md-10 message-list">
This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
<button type="button" class="button save sign_btn" data-action="save">Save</button>
</div>
</div>
and this is the js part:
$(document).ready(function() {
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('display','none');
$(".view-message").fadeIn('slow').css('display','block');
});
});
I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.

Use: height: 0; overflow: hidden;
instead of: display:none
It works for me.

Can you try setting visiblity hidden instead of display:none ?
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('visibility','hidden');
$(".view-message").fadeIn('slow').css('visibility','visible');
});
});

CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.

Trying to traverse the DOM so unique video will play when certain div is clicked

So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!

Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.

You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>

Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});

how does accordion works?

I'm not asking how to show/hide content upon click.
All I want to know is how by placing 2 divs, one on top the other, I can get the effect that by clicking on the bottom div, it "closing" the upper div. that's all. Not exactly accordion, but this is enough for my situation.
I tried to achieve this by animating the upper div height to 0, after clicking the bottom div. It works but not smoothly enough. and IE browsers didn't like it:
JQUERY
$('#BottomDiv').click(function() {
$('#UpperDiv').animate({ height: '0px' }, "slow");
});
in the markup side, both divs are position - relative:
HTML
<div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
</div>
<div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
</div>
So I was just curious maybe there is a better way to achieve this, like jQuery accordion does it. Smooth and works for all browsers.

Assuming a structure such as:
<div id="accordionWrapper">
<div id="UpperDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="MiddleDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="BottomDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
</div>​
Then I'd suggest:
$('#accordionWrapper .accordionSlides').click(
function(){
var cur = $(this);
cur.siblings().children().not('h2').slideUp(); // hides
cur.find('p').slideToggle(); // shows
});​
JS Fiddle demo.
References:
children().
click().
find().
not().
slideToggle().
slideUp().

Does this help ?
Markup:
<div id="UpperDiv" style='background:red;height:200px;'>
</div>
<div id="BottomDiv" style="background:Gray;height:200px;">
</div>
Javascript:
$('#BottomDiv').click(function() {
$('#UpperDiv').slideUp("slow","linear");
});

$('#BottomDiv').click(function() {
$('#UpperDiv').css("display", 'none');
});
The simple solution is above, however, more elegant would be to define a css class such as:
.invisible
{
display: none;
}
and you can make something invisible by using the addClass function and you can remove this class by using removeClass from the tag to make it visible again.