Develop Reference

Jquery click on popup div to show another div

The requirement is user can Click on black box to show orange box, and click on orange box to show red box, but the orange box and red box should be hidden
when user click anywhere of the document except the orange box or the
red box itself.
But currently the issue is that we cannot click on orange box to show red box
Would much appreciate if you could help me out, thanks a lot
Demo link: http://plnkr.co/edit/OqlfbmFPKdXx0wDhnLxZ?p=preview
$(function() {
$('#mypop').click(function(e) {
event.stopPropagation();
});
$(document).on('click', '#myclick', function() {
$('#mypop').toggle();
$(document).one('click', function() {
$('#mypop').hide();
});
});
$(document).on('click', '#myclick1', function() {
$('#mypop2').show();
});
$(document).on('click', '#myclick2', function() {
$('#mypop2').show();
});
})()
#mypop {
background-color: orange;
position: absolute;
top: 130px;
left: 50px;
width: 150px;
padding: 15px;
}
.mydiv {
background-color: black;
padding: 30px;
width: 50px;
cursor: pointer;
color: white;
}
#mypop2 {
margin-top: 150px;
background-color: red;
width: 100px;
height: 50px;
padding: 18px;
display: none;
}
#myclick1,
#myclick2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myclick" class='mydiv black-box'>
click me!
</div>
<div id="mypop" style="display:none;" class='orange-box'>
<p>hello world</p>
<div id='myclick1'>BUTTON1</div>
<div id='myclick2'>BUTTON2</div>
</div>
<div id="mypop2" class='red-box'>
Hello World!!!
</div>

try this. I think this is what you are excepting but I'm not sure since you keep editing your question.
Demo Link: http://plnkr.co/edit/n7rdgqTwiFrXtpgoX4TQ?p=preview
$('#myclick1').click(function(){
$('#mypop2').show();
});
$('#myclick2').click(function(){
$('#mypop2').show();
});

You have couple of things mixed up.
The main stop-point was the very first event listener
$('#mypop').click(function(e) {
which is incompatible with the rest of listeners
$(document).on('click','#myclick1',function(e){
after I have changed it to
$(document).on('click','#mypop', function(e){
the other listeners have started working.
Second thing is that for embedded elements (parent-child) you need to stop event propagation, otherwise the parent event is triggered as well (which is not desired)
$(document).on('click','#myclick1',function(e){
e.stopPropagation();
:
});
I have also changed the CSS a bit and added class hide to use instead of styles. Toggling this class is what hides and shows an element.

Disable OnClick Event Until Another One Is Triggered First

I have 6 divs (.selector) set to do (onclick):
Show all tables
Show Nº1, Hide rest
Show Nº2, Hide rest
...
Show Nº5, Hide rest
They also toggle a class "activated" that changes the background color.
What I'm trying to do is that once I click on "Show Nº1, Hide rest" disable the click option (On this div) until I click in another one first like "Show all tables" or "Show Nº2, Hide rest".
Something like the "once function" but that resets as soon as another div is activated. Any way to do this?
Here is my CSS
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
Here is my JavaScript
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});

If you change toggleClass to addClass in your click function. Then, more than 1 click in your .activated will have no effect (as the click is disabled):
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).addClass('activated');
});
Or you can check if the clicked .selector has .activated class like:
$('.selector').on('click', function(event) {
if($(this).is('.activated')) return;
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});

There's two things to do:
Wrap the JavaScript inside a function
Unbind the click event everytime you click on something
Here's how:
function clickEvent(elements){
elements.bind('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
$('.selector').unbind('click');
clickEvent($('.selector').not(this));
});
}
clickEvent($('.selector'));
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
color: #FFF; //for display purposes
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>

You should be able to do
if($(this).hasClass('activated'))
return;
To skip it if this was allready activated.

How to copy using clipboard.js with dynamic content and triggers

After a click on .fw-code-copy-button I would like to copy source code from it's nearest container.
.fw-code-copy-button-s are created dynamically, after user click dedicated "view source" button.
Html for example button:
<span class="fw-code-copy">
<span class="fw-code-copy-button" data-clipboard-text="...">copy</span>
</span>
This is how i trigger click event, and define the source code to be copied to clipboard:
$(document).on("click", ".fw-code-copy-button", function(){
var source = $(this).closest(".fw-code-copy").next("code").text();
});
And this is how clipboard.js triggers it's copy event
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return source; // source should somehow be copied from scope above it
}
});
Whenever i click anywhere on the website, the following error appears:
Uncaught Error: Missing required attributes, use either "target" or "text"
But first of all I don't want to define text to be copied in data-clipboard-text="..."
and secondly data-clipboard-text is defined with "..." as it's value.
If someone would pay a second i would be very grateful.
[edit] I have written jsFiddle for demonstration, and suprisingly UncaughtError disappeared, but i still need to move source code from onClick to Clipboard scope.
https://jsfiddle.net/2rjbtg0c/1/

According to your original code:
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).closest(".fw-code-copy").next("code").text();
}
});

The trigger is the button you clicked. Get the parent and then return the text inside the code block. You will also need to trim any leading and trailing white-space.
Demo
This grabs text inside a code block as in your included example
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).parent().find('code').first().text().trim();
}
});
.fw-code-copy {
display: block;
position: relative;
width: 400px;
height: 30px;
background: #FFE;
border: thin solid #FF0;
margin-bottom: 0.5em;
padding: 0.5em;
}
.fw-code-copy-button {
position: absolute;
top: 8px;
right: 8px;
padding: 0.25em;
border: thin solid #777;
background: #800080;
color: #FFF;
}
.fw-code-copy-button:hover {
border: thin solid #DDD;
background: #992699;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-1.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-2.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-3.css"></code>
</span>

ExtJS - How to customize buttons?

I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim

simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}

Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc

Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}

I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}

Change button colour

My idea is to show an image on a map as soon as I press a button. I would like to change the colour of the button after it has been clicked and it should stay that colour until I deselect the button. The colour of the button should then change back to its original colour.
Here is the code for the button:
<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>
And here is the function that inserts an image to the map:
$('#tram7')[0].onclick = function() {
if (overlayTram7.getMap() == map) {
$('#tram7').addClass('deselected');
overlayTram7.setMap(null);
} else {
$('#tram7').removeClass('deselected');
overlayTram7.setMap(map);
}
};
The style change worked with a hover, but I don't know how to change the style of a clicked button.
.Button {
font-family: Calibri, sans-serif;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: white
}
.Button:hover {
color: white;
background:green
}
Thanks in advance.

Your question isn't too clear for me. Are you wanting to change the color ONLY while the user is clicking on the button? If so, that's pretty easy, just with CSS:
You'll want the psuedo-selector, :active
.Button:active {
color: white;
background:green
}
Here is an example
Update: You clarified that you want the button's color to be changed after being clicked. Essentially acting like a toggle. Luckily JQuery has a simple solution for you: toggleClass()
Updated example using toggleClass()

The :active pseudo-selector should be what you're looking for
.Button:active {
color: white;
background:red;
}

Use toggleClass in your click callback to add/remove a class which will style your button:
$('#tram7').toggleClass('clicked');
And the class:
.Button.clicked {
color: white;
background:blue
}
http://jsfiddle.net/5m9h6/1/