How to adapt a popup function to icon areas?

[Anonymous]

Greetings,

How can the popup function here be adapted to work with the areas using sprite icons on this page? Not all of the pages and services will be up and running when the new site is launched and I want a popup function letting users know some icons are without links.

I’ve tried to do it but the boxes/icons lose their place or the popup functions but shows no text.

Thanks!

[Anonymous]

I’ve been trying to figure this out. It’s all CSS w/no JS. For some reason a post I made asking a follow up question after I has worked on it and was able to get it to work somewhat was moved to here in the JS section of the forum.

Surely there is a solution to my question. I don’t want to use JS, just adapt the CSS to function.

[Paulie_D]

My apologies for moving it incorrectly…I was on my phone at the time. However, when you use the word “function” and “pop-up” I think ‘javascript’.

However, what you have here is a ‘hover’ effect on a span within a link.

So, which are the ‘sprite’ icons you are referring to on the linked page since pretty much all of the icon images I can see are (or will be) links?

This should be easy to resolve.

[Anonymous]

My apologies for using confusing terminology.

I’m sure there’s an easy resolution to this. I’ve played around with the coding and get various results but can’t get it all to come together. I feel there is additional coding that is required and I’ve searched the web and found a number of similar situations and tried to follow them, but still am not getting it.

Best Regards.

[Paulie_D]

I guess what I am asking is “What problem are you trying to solve”?

If you are adding links that don’t go anywhere….why add them in the first place?

If you want them to be link elements but want add the actual hyperlink in afterwards…that’s whole other thing.

[Anonymous]

Greetings Paulie_D,

The links will not be active immediately, therefore I want to have a popup that says “Coming Soon” so people won’t think the link is non-functioning and I get email’s saying the link doesn’t work. I think a popup would be better than directing them to a page stating the same.

What I have is “working” on the Flickr icon – left-hand bottom of the page here and second icon from the right. The box is compressed and the words aren’t showing. I have a feeling it’s because the height of the popup is being controlled by the coding for the socialicons in the head code.

Best Regards.

[Paulie_D]

The links will not be active immediately, therefore I want to have a popup that says “Coming Soon” so people won’t think the link is non-functioning and I get email’s saying the link doesn’t work. I think a popup would be better than directing them to a page stating the same.

With respect, I would not be adding non-functional links to a live website.

If the link isn’t ready yet…don’t put it on the site in the first place.

I’ll look at the code once I get back to my office but insofar as you would have to alter the HTML to add the ‘pop-up’ span my point above applies.

Either way, you’ll have to change the HTML at some point.

[Anonymous]

Greetings Paulie_D,

Thank you for your reply and suggestions.

I think it will be easier for me to have a popup or two for this instead of taking things out and trying to put them back a few days ahead of the launch date. Besides, it doesn’t hurt to learn how to do something new with CSS.

Best Regards.

[Paulie_D]

OK…but how are you going to remove the ‘pop-ups’ once the links ARE active?

Just thinking off the top of my head, I guess it might be possible to create default pop-ups that only display if the link is internal.

Once the links are made external, the span that create the pop-up could be then ignored by the CSS.

Hmm…I’ll have to think.

[Paulie_D]

OK a quick search for a snippet here tells me that we can target non-http links

See this Codepen: http://codepen.io/Paulie-D/pen/Fsiea

Assuming that you will be using a default of # as a placemarker…that should work.

[Anonymous]

Greetings Paulie_D,

I’m a bit confused as to the colour changes of the box which isn’t needed since all that is needed is the popup to work when the mouse is moved over a specific button. As I said, I have it partially working on the Flickr icon here, but something is interfering with the popup box showing its true size and the text.

I can leave the a href= out completely can’t I until the offsite pageis ready? There’s no need to just have it direct back to the main page.

Best Regards,

Michael

[Paulie_D]

I just put the color change in there for visual reference.

I can leave the a href= out completely can’t I until the offsite page is ready? There’s no need to just have it direct back to the main page.

You could…but just using # won’t redirect to the main page….it’s a’null’ as far as linking is concerned.

<a href="#"></>

[Paulie_D]

As I said, I have it partially working on the Flickr icon here, but something is interfering with the popup box showing its true size and the text.

You have this:

ul.socialicons {
font-size: 0;
}

and this:

ul.socialicons li a {
text-indent: -999em;
}

both of which will make the text in the ‘span’ disappear from view.

I would suggest that you use one or the other and then re-set them for the span.

My Codepen has been updated using the font-size:0 option.

[Anonymous]

Greetings Paulie_D,

I’ve tried this every way I could think of and it was effecting everything from the logo to the drop-down menu. I’m just not getting how to adapt anything to what I want to accomplish. I’m still too new at all of this to comprehend it all.

Best Regards.

[Anonymous]

Just to follow up:

I’ve been reading about how to use two classes for the same element in css and am wondering if this is an approach to this situation? I took the font size and text indent out that you indicated above to understand their effect in this and the popup text appears, as does the text that shouldn’t. It seems there should be a way to join two classes and/or add a new style type of a.flickr to make this work.

Best Regards.

[Author]

Posts