Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to adapt a popup function to icon areas?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #157795
    Anonymous
    Inactive

    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!

    #158163
    Anonymous
    Inactive

    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.

    #158169
    Paulie_D
    Member

    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.

    #158180
    Anonymous
    Inactive

    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.

    #158181
    Paulie_D
    Member

    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.

    #158182
    Anonymous
    Inactive

    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.

    #158196
    Paulie_D
    Member

    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.

    #158216
    Anonymous
    Inactive

    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.

    #158221
    Paulie_D
    Member

    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.

    #158222
    Paulie_D
    Member

    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.

    #158224
    Anonymous
    Inactive

    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

    #158225
    Paulie_D
    Member

    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="#"></>
    
    #158226
    Paulie_D
    Member

    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.

    #158278
    Anonymous
    Inactive

    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.

    #158279
    Anonymous
    Inactive

    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.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.