Clicking on the button link causes it to jump to a

Currently, I am utilizing Mixitup JQuery to create a portfolio page that organizes my content based on different filters. However, I have encountered a slight issue where when clicking on an item, the Jquery function works and shuffles the content, but the buttons momentarily jump up about 50px before returning to their original position.

Interestingly, if you double click on the same link labeled "web" or "contact", you can replicate this issue. - Marc Jenkinson 43 mins ago

Feel free to check it out here: http://codepen.io/anon/pen/BJnhH

$(function(){
  $('#content-column').mixItUp();
});
jqueryhtmlcss

Answer №1

When you state 

button.items:focus {
  display:none;
}

You're not simply saying "Hide the focus on these buttons".

What you're actually saying is "Hide the button that is currently being focused on".

This is causing the visual jump you are experiencing. Remove these lines and you'll notice that the buttons don't disappear when clicked.

There are effective methods to remove the focus effect across modern browsers (which can be found here on Stack Overflow), but it's even better to convert these elements into anchors.

EDIT: Check out this link for How to remove border (outline) around text/input boxes? (Chrome)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to disregard inherited styles without relying on the use of "!important"?

Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...

htmlcss

Selecting an option from the knockout dropdown menu

I implemented a language dropdown in layout.chtml using knockout js. <select id="Language" class="styled-select" data-bind="value: Language,options: locale, value: selectedLocale, optionsText: 'name'"></select> var viewModel = th ...

javascriptjqueryajaxasp.net-mvcknockout.js

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

javascripthtmlcssweb

How can jQuery be used to convert an ID into a string?

Currently, I am working with a jQuery function that interacts with an API and retrieves some data. Within this data, there is a specific piece of information that I need to manipulate. My goal is to replace instances where teamId = 100 with "Blue Team" an ...

jqueryhtmljsonajax

Tips for modifying padding in HTML and CSS?

I'm struggling to add padding around the image without affecting the mobile view. Here's what I've tried: float-right or padding-right:250px; // but nothing happens and it affects the mobile view. Please review my code: .fontProfile ...

htmlcsshtml5-canvasmedia-querieshtml5-video

Using HTML, CSS, and jQuery to create a master-detail feature

I'm looking to implement a master-detail layout, so I decided to follow this tutorial for guidance: While trying to replicate the tutorial, I encountered an issue with my code. Here's the code snippet that I am working on: HTML/jQuery <!DO ...

javascriptjqueryhtmlcss

Bringing in CSS variables to a Typescript document

In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files. However, some of our older code follows a similar structure bu ...

javascriptcssreactjstypescriptmobx

Conceal the bootstrap hamburger icon if there are no navigation items present

I am working on dynamically populating nav-items within a navbar bootstrap component. There are instances where no nav-items are present, and during those times, I would like to hide the hamburger icon in device viewports. I have identified that the class ...

htmltwitter-bootstrapbootstrap-4

What could be causing the lack of firing with Mobile Safari and jQuery events?

My HTML5/JavaScript app, originally designed for an in-dash car unit, is now being ported to the browser for marketing and presentation purposes. The transition seemed simple at first, just some CSS adjustments for cross-browser compatibility. However, whe ...

jqueryhtmliosmobile-safarijquery-events

Utilize Ajax to execute a task based on the response received

Using jQuery Ajax, I am sending an id to another page where I select a column from a MySQL database and echo a row based on that id. While this part works well, the second function is not working. My question is, how can I make a click event happen on the ...

jqueryajax

Delete any content that is not enclosed in tags

I am struggling with manually rendering Django forms and it's producing the following code. Is there a way to remove text without HTML tags, such as "Currently:" and "Change:", which are difficult to style with CSS? <div class="row align-cente ...

htmlcssdjangodjango-forms

nested sequential ajax calls

I am attempting to run a couple of functions with ajax calls inside them in sequence. However, I cannot execute them asynchronously as they both start simultaneously. Here is my code: function engine_start() { a1(); a2(); } a1() { $.ajax( ...

javascriptjqueryajax

Troubleshooting challenges arise with Bootstrap's button group spacing issue

I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...

htmlcsstwitter-bootstrapbootstrap-4

Issue within the application causing a sudden shutdown

I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...

androidhtmlcordova

Differences between ajax.actionlink replace and replacewithWhen it comes

Within my ASP.NET-MVC application, I am utilizing Ajax.ActionLink in a view and have opted for InsertionMode.Replace. However, I recently came across the ReplaceWith option. Can anyone clarify the distinction between the two? Does one offer a more comprehe ...

jqueryasp.netajaxasp.net-mvc

Mobile Bootstrap4 NavBar Bug Fix

I am currently working on coding a website with Bootstrap. The navbar functions perfectly on desktop, but when accessed via mobile device, the button containing all the links does not work. Here is a picture for a more accurate description Below is my HTM ...

htmlmobilebootstrap-4navbar

Fancybox may be difficult to spot when using Safari

Currently, I am utilizing fancybox with the latest versions of jquery.min.js (3.3.1), jquery.fancybox.css (3.5.7), and jquery.fancybox.pack.js (3.5.7). Everything is functioning as expected on all browsers except for Safari. On Safari, the content within ...

javascriptjqueryfancybox-3

Adjust the dropdown selection according to the entered text

I am looking to dynamically change a select option based on the value entered in a text input field. For instance, when I type "mydomain.com," this is what should happen: I type "mydomain" I type "." (dot) The input stops accepting characters The script ...

jqueryformsdrop-down-menuinput

PHP code for sending email with attachment file

I have created an HTML form with the option to upload a file and send it to me via email. Additionally, I already have a PHP script that sends textbox values and text area values via email. Now, I would like the uploaded file from the form to be sent to m ...

phpjavascripthtmlformsemail

The design and structure of the CSS link, as well as

What motivates most developers to utilize the following links in their code: <link href="/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css" type="text/css" /> <link href="/css/main.css" type="text/css" /> <link href="/css/table.css ...

htmlcsscode-formatting