Chrome - Display Dilemma with Redrawing/Recoloring on Show/Hide

Encountering an unusual problem in Chrome with the navbar-brand element of my website's bootstrap navigation menu.

We feature a larger site logo in the header section, along with a smaller logo inside the navbar-brand element which is initially set to display:none. As users scroll down the page, we affix the navbar to the top of the browser and reveal the navbar-brand element. Upon scrolling back up, the small logo should hide to make room for the large logo.

This functionality works seamlessly in IE and Firefox, but experiences some issues in Chrome. While the logo shows upon scrolling down and hides on scrolling up, the menu items do not shift back to their original position when the logo is hidden. Interestingly, clicking on any menu entry corrects this issue and shifts the menu entries back into place.

The code itself is quite simple, so I don't believe that is the root of the problem;

$(window).scroll(function () {
    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-brand').show();
    } else {
        $('.navbar-brand').hide();
    }
});

I have created a stripped-down jsfiddle showcasing the problem at https://jsfiddle.net/96jqnu38/3/

I am unable to figure out how to prompt Chrome to redraw/repaint the menu entries back into their correct positions.

(Chrome 43.0.2357.81 on Windows 8.1)

jquerycssgoogle-chrometwitter-bootstrap-3

Answer №1

It seems like the main issue here is related to a css problem. The jquery function you are using adds an inline css attribute to a specific element. In this case, the use of display:none with the .hide method removes both the height and width of the element. However, in order for the css structure to take effect, you should be hiding the container element rather than just a child element.

jQuery

    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-header').show();
    } else {
        $('.navbar-header').hide();
    }

CSS

.navbar-brand {
    position: relative;
    padding: 5px 15px;
}

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

Initiating the click event on a designated element

I'm working on a grid of team members represented by figures with figcaptions. I want to be able to trigger a click function only for the specific figure that has been clicked, rather than applying the function to all figures at once. Here is an exam ...

javascriptjqueryhtmlclick

Display HTML content within designated fixed-column sizes

Looking to divide the content of an HTML file into multiple fixed size columns, both in terms of height and width, then display it in a Webview. I attempted employing the CSS properties mentioned below, but couldn't get it to function as desired. -we ...

javascriptandroidhtmlcss

Tips for automatically scrolling to the bottom of a page and focusing on an iframe

My website features a large banner image with content followed by an embedded YouTube video within an iframe. While the webpage is responsive, on mobile devices the header appears too big and users have to scroll down to see the video. I want the webpage ...

htmlcssiframe

What is the best way to pinpoint a specific Highcharts path element?

I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage. Below ...

javascriptjqueryhtmlcsshighcharts

Update the chosen option of the <select> element that was generated through PHP if there is a parameter value present in the URL

I'm currently working on a code snippet like this: <select name="id" id="id"> <OPTION VALUE="null">Select<OPTION> <? foreach ($genres as $row){ ?> <OPTION VALUE="<? echo $row->id; ?>"><? echo ...

phpcss

Ensure that any portion of a child DIV becomes visible only if it falls within the confines of the parent DIV, even if the overflow:hidden property is

My inner div can be resized by the user, and I have it inside another div. The issue is that when the inner div extends beyond the outer div, it covers it completely, or I have to use overflow:hidden, which hides the outer edges of the inner div. Ideally, ...

javascriptjquerycss

How about "Can I position two divs on the right side of the page

After browsing through some StackOverflow threads and other sources, I'm still struggling to figure out how to float two divs to the right while aligning them vertically (with the "sign in" div on top). Based on my findings, here are the key points: ...

htmlcss

Is there a way to incorporate the Indian rupee symbol into a Google chart?

I've been trying to incorporate the Indian Rupee symbol into a Google chart using the code below: var formatter = new google.visualization.NumberFormat({ prefix: '&#8377;' }); However, I'm encountering an issue where ...

javascriptjquerychartsgoogle-visualization

Several tasks carried out within a loop

I am working on a PHP page that includes spoilers and I am using JavaScript to show or hide them. The process involves changing classes on the span of each spoiler div (.hidden, .visible) with classes like s1, a1, s2, a2, s3, a3, etc. My goal is to select ...

javascriptphpjquery

unable to return text from the jquery option, it is blank

Between versions 1.7 and the latest version of jQuery, $('option:selected[text~="some text"]') is now returning an empty array. In previous versions, it was working properly. Is this a bug? Update: HTML: <select class='txt :required ...

jqueryhtml-select

Allow only a specific section to be scrollable, instead of the whole page

Currently, I am immersed in a project where one section must dynamically populate elements pulled from a database. Due to this dynamic nature, the quantity of elements can vary significantly. The challenge lies in our design concept, which aims to elimina ...

csshtmloverflow

unable to access the hyperlink within the jquery content slider

There's a content slider on my page at , but I'm having trouble inserting a link inside it. Every time I try, it just displays as plain text. Here is a snippet of my html code: <div id="one" class="contentslider"> <div class="cs ...

jquery

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

javascriptcssreactjsreact-bootstrap

Utilizing jQuery to apply multiple classes simultaneously?

What is the purpose of allowing multiple classes to be added? Is there any real benefit to this feature or is it just unnecessary complexity? I attempted to utilize it, but found that it serves no practical function. ...

javascriptjquery

How can I resolve the issue of React not identifying the prop on a DOM element?

Currently, I am learning React and facing an issue with a warning message: "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell i ...

cssreactjsstyled-componentsreact-props

Toggle visibility without CSS

I have a specific code example that I would like to modify using CSS properties. How can I achieve this? <div id="btn-toggle-menu">Menu</div> <div id="menu-wrapper"> <ul> <li>link item</li> ...

jqueryhtmlcss

Refresh Django table data without the need to reload the entire page

In order to retrieve data in my view, I use the following code: order = Order.objects.filter(owner=request.user).order_by('-id')[:10] The template code below works perfectly fine. However, I am looking to dynamically update this table every 10 ...

jqueryajaxdjango

Ways to eliminate a single child from a jQuery object without altering the HTML structure

My code snippet looks like this: $.fn.extend({ del: function() { } }) var ds = $(".d"); ds.del(ds[0]) console.log(ds.length) I am trying to use jquery.del to remove a child from some jquery elements without altering the HTML. Any suggest ...

javascriptjquery

Building a custom JavaScript menu for Internet Explorer 8

I'm having trouble with a JavaScript menu. It works fine in Chrome, Firefox, IE9, and Safari, but it's not clickable in IE8 - nothing happens. Here is a simplified version of my code: <script type="text/javascript"> $(document).ready( fun ...

javascriptjqueryinternet-explorerinternet-explorer-8

What happens when the overflow-hidden property is overlooked due to a child element being assigned absolute positioning?

When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...

htmlcss