How to make an Icon change it's position when there's a line break with javascript or css?

Question

So I figured out how to do it, but it only works when the page first loads and not responsively. Here's the javascript I used.

     if ( $(".alert-box").height() >= 90 ) { 
        $('.img').css('padding', '30px 20px 0 20px'); 
    }

    else {
        $('.img').css('padding', '20px 20px 0 20px'); 
    }

Is there any way to make this work while the page is stretched or shrunk?

Ok I'm having an issue where I have an icon on an alert and when it's 1 line of text the icon needs to be center aligned with that text. That part is no problem, now when the page is responsively brought down in size and the line of text breaks we need the icon now to be center aligned with the 2 lines and not just the first line. I was thinking about using the @media code to just set the different padding when a certain pixel is hit, but the alert text is dynamically pulled and it's always changing so the breaks could happen at different widths. Does anyone know of a way to achieve this? I can't figure it out with css, and I'm not really a javascript coder so I'm stumped right now. I feel like this should be possible.

Thank you everyone for your help and time!

Here a quick html page with 3 images explaining what I'm looking to do. I would of posted them here but I don't have enough rep: Images

Here's the css I'm using

.alert-box {
    margin-top: 30px;
    border-radius: 5px;
    padding: 0;
    border-style: solid;
    border-width: 1px;
    display: block;
    font-size: 0.8125rem;
    font-weight: normal;
    position: relative;
    transition: opacity 300ms ease-out;
    background-color: #008CBA;
    border-color: #0078a0;
    color: #FFFFFF; 
}

.alert-box .text {
    padding-left:20px;
    font-size:14px;
    display:inline;
}
.alert-box p {
    margin-bottom: 0;
    padding-right: 30px;
    padding-left: 67px;
}
.alert-box .img {
    padding: 20px 20px 0 20px;
    float:left;
    position: absolute;
}

Welcome to Stack Overflow. Can you edit your post to include some of the critical code sections necessary to fully understand your problem? It'd be easier for us to assist you if that context was provided. — Muhammad Abdul-Rahim, May 06 '15 at 19:10
Welcome to Stack Overflow. It's highly recommended to include the code in the question itself, otherwise future readers will most likely not be able too see what was broken. Please take a moment to read [How to ask a good question.](http://stackoverflow.com/help/how-to-ask) — Erik Philips, May 06 '15 at 19:11
Yes, please follow the above tips. Are you talking about the exclamation mark icon on the top, in the blue message? — Dinei, May 06 '15 at 19:14

score 2 · Answer 1 · answered May 06 '15 at 19:20

This would be my approach:
First, remove the image inside the .alert-box.
Then, add padding-left: 70px; to .alert-box.
Next, have add an .error class on the .alert-box that sets: background-image: url(img/Error-icon_0004_Dark-Blue.png); background-repeat: no-repeat; background-position: 20px center;

.alert-box {
    margin-top: 30px;
  border-radius: 5px;
  padding: 0 0 0 70px;

 }

.error {
  background-image: url('http://otbstudios.com/alert/img/Error-icon_0004_Dark-Blue.png'); 
  background-repeat: no-repeat; 
  background-position: 20px center;
  }

<div data-alert="" class="alert-box error">
  <div class="large-6 text"><p>Bacon ipsum dolor amet jerky ribeye kielbasa andouille swine pig meatloaf sausage pancetta salami ham hock turkey.</p></div><a href="#" class="close">×</a>
</div>

Thank you this works great up until 2 lines. Once it goes into 3 lines I need it to stay between the first 2 lines rather then being centered. I updated my link to show what I'm looking for. — JoeRo, May 06 '15 at 19:52
ahh... thats a tricky one.. the only sure fire way of doing that is with some javascript.. psudo: when alert height is more than x, set background-position accordingly. — kingkode, May 06 '15 at 19:59

score 0 · Answer 2 · answered May 06 '15 at 19:28

0

You need to add these two CSS rules to the <img> for the effect you're looking for.

position: absolute; 
top: 50%;

Of note, this is the technique that the Foundation CSS uses to make the close button center align as well.

This is the effect of making those changes:

enter image description here

answered May 06 '15 at 19:28

jdphenix

15,022
3
41
74

Please add a negative margin-top too to correctly align the img, as the Foundation do. – Dinei May 06 '15 at 19:36
I may be mistaken on the OP's intent, but they're looking for it to be center aligned with the text, not the box. – jdphenix May 06 '15 at 19:38
Thanks this is close to what I'm looking for, but I'd like the icon to just be aligned with the top 2 lines of text and not centered in the alert. I updated my link above to show how it should look when there are more then 2 lines. – JoeRo May 06 '15 at 19:41

score 0 · Answer 3 · answered May 06 '15 at 20:55

I know an approach, but I think it will work only if you could set a fixed height to the container...
Look at it:

html, body {
  height: 100%;
}
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-size: 0.8125rem;
  font-weight: normal;
  position: relative;
  transition: opacity 300ms ease-out;
  background-color: #008CBA;
  border-color: #0078a0;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.6;
  height: 100px;
}
.alert-box p {
  margin-bottom: 0;
  padding-right: 30px;
  padding-left: 67px;
}
.alert-box .img {
  margin: 0 20px;
  float: left;
  display: block;
  width: 28px;
  min-height: 28px;
  height: 100%;
  max-height: 63px;
  position: relative;
}
.alert-box .img img {
  display: block;
  position: absolute;
  bottom: 8px;
}
.alert-box .close {
  right: 0.25rem;
  background: inherit;
  color: #333333;
  font-size: 1.375rem;
  line-height: .9;
  margin-top: -0.6875rem;
  opacity: 0.3;
  padding: 0 6px 4px;
  position: absolute;
  top: 50%;
}

<div data-alert="" class="alert-box">
  <div class="img">
    <img src="http://www.otbstudios.com/alert/img/Error-icon_0004_Dark-Blue.png" width="28" height="28">
  </div>
  <div class="large-6 text"><p>Bacon ipsum dolor amet jerky ribeye kielbasa andouille swine pig meatloaf sausage pancetta salami ham hock turkey. Bacon ipsum dolor amet jerky ribeye kielbasa andouille swine</p></div>
  <a href="#" class="close">×</a>
</div>

Obviously, setting a fixed height don't solve your problem, right? If you could set a fixed height, you wouldn't need this, in first place.
Unfortunatelly, I couldn't think on another solution that works with relative heights... If someone realize how to change my code to do that, please edit it.

score -1 · Answer 4 · edited May 23 '17 at 12:14

-1

See the answer here: how to change the style of alert box

I guess that leaves you with a short pice of JS to create a modal, into which you can decant the necessary styled (CSS) messages with icons ... see this for creating a simple modal dialog ... http://www.ericmmartin.com/projects/simplemodal-demos/

Hope this helps ... EJK

edited May 23 '17 at 12:14

Community

1
1

answered May 06 '15 at 19:28

A_nobody

164
11

How to make an Icon change it's position when there's a line break with javascript or css?

4 Answers4