0

I have a "welcome bar" at the top left of every page which makes a call to the database to get the user's name based on the login.

Here's how it looks (the section I'm referring to is the "Welcome, " with the wraparound maroon bar, the gray square and the Logout button): WelcomeBar.jpg

Whenever I click on a menu item, the "Welcome Bar" shifts a little, which isn't a problem, but sometimes it appears as though the page is requerying the database or something and everything in the Welcome Bar shifts to the far right of the page, except for the user name, which goes blank and eventually re-appears and everything shifts back to where it belongs. I can't get the shifting to stop, I've tried a lot of different CSS to help fix it (below).

The Welcome and the maroon border around is an image The Logout button is in a div and formatted with CSS The grey button with all the little squares is also an image which I apply to the containing img tag using jQuery.

Here's the jQuery:

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
    var topUserWelcomeWidth = ($("#topUserWelcome").innerWidth());

    var headerBorderWidth = topUserWelcomeWidth + 380;

var glcLeft = topUserWelcomeWidth + 120;

$("#innerWelcomeTab").attr ("width", headerBorderWidth + 'px');

    $("#headerBorder").attr ("width", headerBorderWidth + 'px'); 
$("#headerBorder").attr("height","40px");
$("#headerBorder").attr("src","/library/skin/neo-Amc2014/images/Header.png");

$("#glc").css('margin-left', glcLeft +'px');

});
</script>

And here's the HTML, etc. The rest of the page follows this

<div id="innerWelcomeTab">
<img id="headerBorder" src="" />
<div id="topUserWelcome">
    <span id="welcomeText">Welcome, </span>${loginUserDispName}</div>
    <a href="#" id="glc"><img id="dots" src="/library/skin/neo-Amc2014/images/dotsGray.png" /></a>
    <a href="${loginLogInOutUrl}" title="${loginMessage}" id="loginLink1" >${loginMessage}</a>
</div>
</div>

Here's the CSS:

#innerWelcomeTab { /* contains #headerBorder, #topUserWelcome, #glc keeps button and logout to right of username*/
position: absolute;
right: 50px;
float: none;
display: inline;
}

#headerBorder {
position: relative;
float: none;
}

#topUserWelcome{  /* contains #welcomeText */
position: relative;
float: none;
margin-top: -2.2em;
color: #5a5a5a;
font-weight: normal;
font-size: 110%;
margin-left: .5em;
}

#welcomeText {
font-size: 100%;
color: #952a4e;
font-weight: bold;
float: none;
}

#glc {
position: relative;
float: none;
top: -1.6em;
}

#loginLink1 {
position: relative;
float: none;
margin-left: 164px;
color: white;
text-decoration: none !important;
top: -2.1em;
font-size: 100%;
font-weight: bold;
background-color: #952a4e;
border-radius: 5px;
padding: 4px 6px 6px 6px;
text-align: center;
width: 4em;
height: 1em;
border: 1px solid #952a4e;
box-shadow: 3px 3px 1px #808080;
}

2 Answers 2

1

In your case you should only be using position:relative on the parent that has absolutely-positioned children. Get rid of position:relative. Also, you're clearing floats all over the place, but you're not even using floats. Your "dots" image should be a CSS background, that way you don't need to mess with all this positioning issue to begin with.

2
  • Do you mean that #innerWelcomeTab should not have either position:relative nor position:absolute? And use position:absolute on all the children of #innerWelcomeTab? I removed all the float:none s The "dots" image is a link to a div that appears when clicked on, so I need the image
    – Kim Wilson
    May 8, 2014 at 17:27
  • I based the positioning on what is on this page: stackoverflow.com/questions/10426497/…
    – Kim Wilson
    May 8, 2014 at 17:33
0

I figured it out with the help of @Diodeus and also using HTML5's Local Storage. I removed all the float:none

In Javascript I added this:

var topUserName = "${loginUserDispName}";

var userNameWidth = topUserName.length;

localStorage.setItem('userNameWidth',userNameWidth);
localStorage.setItem('UserName',topUserName);

And then in the jQuery section changed this variable:

var topUserWelcomeWidth = parseInt(localStorage.getItem('userNameWidth'));

I put the #headerBorder img and width right on the page and took it out of the jQuery

Then took out the position:relative from #headerBorder, #topUserWelcome and changed #glc to position:absolute and changed some of the top and left measurements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.