We Keep Coding

How to prevent click events from overlapping each other?

Please see image below for error:
As shown, there is conflicting text. The initial state of the website has 6 blocks with different colors with text in the center. When clicked on, more information is displayed in the middle section. However, when you click on another box the background color is changed and/or the text inside each box is either shown or hidden.
I suspect this is happening due to my incorrect use of jQuery

I tried to fixed it hands on but still doesn't work that well because you have to click on the field with which you opened the field to close it again. you should build a click handler for the closing icon, then it should work.
https://codepen.io/felixhaeberle/pen/qGjpVJ
First, I check each Item if it is blocked and if it's blocked, return.
Then I set all items to blocked and after unblock the current (this) item.
A closing click handler (close icon) should remove all blocked entry's like $('.closing-link').click(function(){ allItems.toggleClass("blocked"); // your closing code follows here });
$("#fbPageDesign").on('click', function(){
if ($(this).hasClass("blocked")) return;
allItems.toggleClass('blocked');
$(this).toggleClass("blocked");
$(".box").toggleClass("bg-color2");
$(".boxText,.whiteRectangle").toggle();
});
a snippet out of my solution.

react navbar button , how to set active

I want my sidebar button to change color when I visit the page it navigates to.

I had this problem before and :active didn't help that much because it returns to its original css once I click other part in my page.
What you should do is create a class for your selected navbar button
.current_active_navbar {
background-color: $main-red;
}
then in your js, create a condition that will apply the .current_active_navbar to navbar based on your current URL. You can get your current URL through this window.location.href
So let's say your current url is localhost:3000/timer then you can have your condition like this
if(window.location.href.split("/")[3] === "timer")

I am not too good with CSS myself, but this does a pretty good job of explaining it.

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.

Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

How to replace a Font Awesome icon within link text with a different icon on link click?

I run a Wordpress website that is edited by laypersons with no coding ability. The homepage consists of a list of standard html links (all of which are globally styled by css to resemble a button), the link text of which consists of a Font Awesome icon shortcode and the link title.
[icon name="car"]Link Text
For a user to add another link to the homepage, all they need to do is--while in the Visual Editor--select a Font Awesome icon via the tinyMCE menu, write their link text, and select both the icon and the link text when creating their link via the tinyMCE "create link" button.
The Font Awesome shortcode above results in the actual html being rendered like this:
<i class="fa fa-car"></i>Link Text
My question: when the link is clicked, I would like to have whichever icon is contained within that link to be replaced by the spinning Font Awesome gear/cog icon while the page is transitioning to the link target, thus replacing the link with the following:
<i class="fa fa-cog fa-spin"></i></i>Link Text
I just cannot figure out how to make this happen. I have tried many ways via jQuery but I am just learning this language and cannot seem to figure out how to do it.
In the meantime, I have accomplished a workaround by inserting both icons and using the :focus pseudoclass to show and hide one or the other after the link is clicked, but this solution does not seem to work on mobile and I don't want to have the users have to have to insert both icons each time:
http://jsfiddle.net/qfnzmpzd/
Any solutions that require the individual making the link to manually add a class to the shortcode/html will not work. Thank you all for your help!!

Since you tagged jQuery, you can add a .click() event:
// When a link is clicked
$('a').click(function() {
// If the link contains an icon
if ( $(this).find('.fa').length ) {
// Remove the icon
$(this).find('.fa').remove();
// Prepend the spinner
$(this).prepend('<i class="fa fa-cog fa-spin"></i>');
}
});
Here's a Fiddle.

Popup menu with hover class in jQuery (trying to replicate select box with a <ul>)

I've been trying to figure this out for awhile, but I'm just going in circles.
Essentially, I have an input field with 2 options that one can select. This isn't a normal <select> option, rather an <ul> with 2 <li>'s. Which is fine for what I'm doing.
In state 1: it's just a normal input form.
In state 2: the user hovers over it and can choose the (currently inactive state which in the example below is "exclude").
In state 3: The inactive (exclude) option is clicked, and toggled with the currently active (include) state, resulting in exclude now being the active state.
I put this on jsfiddle : http://jsfiddle.net/ULafm/13/ -- My text toggle isn't working properly on jsfiddle, although it does on my local server where I'm developing).
The biggest problem is getting rid of the popup from .form-filter .link a:hover and .form-filter .link:hover after the inactive state is clicked like in state 2 of the image above.
I tried doing $(".form-filter ul li").removeClass("hover") and some other variants, like
$(".form-filter ul .li:hover").css("display", "none") or
$(".form-filter ul li a:hover").css("display", "none") but to no avail.
LinkedIn's search is a similar example to what I'm doing:
To sum it up in one question: how can I make it so after the text toggles, the hover state disappears to look like state 3?
Any help would be greatly appreciated.

If you want the list to hide after certain events, I would probably control its visibility directly through JS instead of through :hover CSS selectors. Example:
http://jsfiddle.net/ULafm/16/