HTMLHelp Forums > HRef issue in Slideshow with tooltips

Full Version: HRef issue in Slideshow with tooltips

HTMLHelp Forums > Web Authoring > Web Site Functionality

Tarquinius

Mar 24 2015, 12:05 PM

Hi all-

I'm new to the forum and am relatively new to HTML coding on the whole-- so please be patient with me if I have trouble understanding

Anyway-- I'm working on building a website with a template I bought. Here is the link to the theme for reference.

The problem in question is the slider/slideshow with the tooltip header. The tooltip features a nifty little animation which responds to your mouse hovering. Anyway, within the code, there is an <a href> wrapped around the slider image.

However, when you go to the website and click on the slider image, it directs you to the slideshow's fifth image's href-- there are 5 total images in the slideshow.

I did a bit of testing and I cannot figure anything out. One suspicion I had and I saw this only a few times was that the linking was correct ONLY WHEN the animation for the tooltip was activated (e.g., I hovered my mouse over it to cue the animation).

Code below...the top part is the text/css which defines the slider properties. Bottom portion are the images and tooltips.

CODE

<style media='screen' type='text/css'>
.container {
margin: 0 auto;
overflow: hidden;
width: 100%;
margin-top: -21px;
margin-bottom: -142px;
}
#content-slider {
    height: 493px;
    width: 100%;
}
#slider {
    background: none repeat scroll 0 0 #000000;
    height: 600px;
    overflow: visible;
    position: relative;
    width: 100%px;
}
#mask {
    height: 600px;
    overflow: hidden;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:100%;
    height:600px;
    position:absolute;
    top:-325px;
    list-style:none;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;
    -webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;
}

#slider .tooltip {
background: rgba(0,0,0,0.7);
width: 500px;
height: 60px;
position: relative;
bottom: 342px;
left: 360px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
    text-align: center;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left:0px;
}

/* PROGRESS BAR */
.progress-bar {
    position: relative;
top: -118px;
width: 680px;
height: 11px;
background: #000;
-moz-animation: fullexpand 25s ease-out infinite;
-webkit-animation: fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; }
    60% { top:325px; opacity:0; z-index:0; }
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; z-index:0; }
    60% { top:325px; opacity:0; z-index:0; }
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}

</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container'>
    <div id='content-slider'>
        <div id='slider'>
            <div id='mask'>
            <ul>
            <li class='firstanimation' id='first'>
            <a href='#'>
            <img alt='Shop' src='http://www.shindiristudio.com/allaroundwp/wp-content/uploads/2013/08/36.jpg'/>
            </a>
            <div class='tooltip'>
            <h1>Welcome To Montric</h1>

            </div>
            </li>

            <li class='secondanimation' id='second'>
            <a href='#'>
            <img alt='Shop' src='http://www.shindiristudio.com/allaroundwp/wp-content/uploads/2013/08/46.jpg'/>
            </a>
            <div class='tooltip'>
            <h1>Lets Go Shopping</h1>
            </div>
            </li>

            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img alt='Camera' src='http://www.shindiristudio.com/allaroundwp/wp-content/uploads/2013/08/8.jpg'/>
            </a>
            <div class='tooltip'>
            <h1>Photography</h1>
            </div>
            </li>

            <li class='fourthanimation' id='fourth'>
            <a href='#'>
            <img alt='Fast' src='http://www.shindiristudio.com/allaroundwp/wp-content/uploads/2013/08/3-11.jpg'/>
            </a>
            <div class='tooltip'>
            <h1>High Quality And Fast</h1>
            </div>
            </li>
<li class='fifthanimation' id='fifth'>
            <a href='#'>
            <img alt='Photography' src='http://www.shindiristudio.com/allaroundwp/wp-content/uploads/2013/08/8.jpg'/>
            </a>
            <div class='tooltip'>
            <h1>Photography</h1>
            </div>
            </li>
</ul>
            </div>
            <div class='progress-bar'/>
        </div>
    </div>
</div>
   </b:if>

Tarquinius

Mar 27 2015, 11:50 AM

Bump. Any help would be much appreciated!

pandy

Mar 27 2015, 12:47 PM

I'm not familiar enough with that part of CSS3 to have an opinion, but it actually works as it should in Chrome (or rather Iron, but it should be the same as Chrome). It works as you say in FF or rather it works not.

You should correct the HTML errors, but alas that won't make the slideshow work.

pandy

Mar 27 2015, 12:57 PM

Actually, fixing the CSS errors does seem to fix it. Note, I couldn't be bothered to fill in more than two URLs, those for the first and last slide, so that's all I've tested.

First, remove the HTML comment you have last in the style sheet or make it a CSS comment. That wasn't a show stopper though. This was.

CODE

#slider {
/*edited out declarations that didn't have errors */

width: 100%px;
}

Tarquinius

Mar 27 2015, 02:46 PM

QUOTE(pandy @ Mar 27 2015, 01:57 PM)

CODE

#slider {
/*edited out declarations that didn't have errors */

width: 100%px;
}

Thank you so much for your help! I have to admit though that I'm a little fuzzy on what your solution was (I'm a super amateur at HTML/CSS so please bear with me...)

Regarding the last HTML comment in the style sheet you mean  in this section correct?

CODE

}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}

</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

and then regarding this:

CODE

#slider {
/*edited out declarations that didn't have errors */

width: 100%px;
}

Can you please elaborate? Do I have to remove sections of the CSS code or change it?

Thank you!!!!

pandy

Mar 28 2015, 01:46 AM

Yes, that comment. You can't use HTML syntax in a style sheet. In the width declaration you use two units, both percent and px. I took a chance on % and deleted px. Then the slide show started to work.

Use the validators. They tell you those things and then some.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator.html.en

Their output can be somewhat obfuscated though. I prefer the HTML validator at this site, but it doesn't do HTML5.
http://htmlhelp.com/tools/validator/

You seem to use XHTML syntax, at least partly. You put those closing slashes where they shouldn't be and even when they are in the right spot you omit the required space before the slash.

It should be like so, with a space.

CODE

<br />

NOT like so.

CODE

<br/>

In the real world those slash errors aren't very important, but they will give you oodles of validation errors and obsure more important errors, so fix them first. What doctype do you use? If you use an earlier HTML version than 5 you can't have the slashes at all. If you use HTML5 you can, but there's no need to. If you actually use XHTML you must have them. But there's not much point in using XHTML today since it has been discontinued and will die out, the sooner it does the better IMHO. So I say get rid of the slashes and go for either HTML 4.01 or HTML5.

pandy

Mar 28 2015, 02:01 AM

Also, if you don't use a doctype at all, you should. You must use one to be able to validate. But (alas) the doctype also is important for how CSS renders and you want to choose a doctype that gives you Standard Mode (AKA Strict Mode).

Activating the Right Layout Mode

Tarquinius

Mar 28 2015, 11:23 PM

Thank you so much for all of the informtion!

FYI this is only one part of my entire script...and in actuality this template was written by Templateify which I've come to learn is just an awful company...so anyway all of those micro errors with the end tags are something written by the OP, and I'll have to go through it all and fix it.

Anyway, this is the doc declaration

CODE

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

I made some of the suggested edits including getting rid of the HTML comment and changing the width declaration to only one measurement. Ran it through a validator and also did a few things but I haven't seen any difference, I'm still only getting redirected to slide 5...

I did play around with something else though:

CODE

  }
      #slider {
        background: none repeat scroll 0 0 #000000;
        height: 600px;
        overflow: visible;
        position: relative;
        width: 100%;
      }
      #mask {
        height: 600px;
        overflow: hidden;
      }
      #slider ul {
        margin:0;
        padding:0;
        position:relative;
      }
      #slider li {
        width:100%;
        height:600px;
        position:absolute;
        top:-325px;
        list-style:none;

Within this part I started monkeying around with the position tags either by getting rid of them or changing the declaration to relative/absolute etc. Also tried to change the list to ordered-- either way, I was able to switch the redirection to the first slide but then none of the other pictures would show up and it would essentially get stuck. Is there anything of promise here?

pandy

Mar 29 2015, 04:06 AM

Well, with the markup and CSS you posted the width thing did make a difference. Can you post the URL to the page so we can see the whole thing?

Tarquinius

Mar 29 2015, 09:55 AM

Yeah absolutely. I can also expose the entire site's code if you wish but it is pretty long.

I REALLY appreciate all of your help and patience with this matter

Site

FYI I know earlier you stated you tested the code in Iron. Just for exposure I've been testing this functionality in both Chrome and Firefox..

pandy

Mar 29 2015, 01:14 PM

Yeah, you are right. There's much of everything.

I was thinking maybe something else in your CSS overrides the width change, but it doesn't look the way.

Tarquinius

Mar 30 2015, 08:11 AM

Unfortunately since this is also a Blogger hosted website, I can't really get to the underlying CSS to check everything (except for what is written in the code) so there could be also be something deeper that we don't see.

Is there potentially a CSS snippet that could be add to Blogger's base CSS to change the functionality?

FYI, as a side tidbit-- I purchased this template from Templateify whose basic schpeel was that if you elected to purchase the template instead of freesource it they would give you premium support on the template. I created two tickets (including one for this issue) both of which have not been responded to in over 20 days. So you've been my only support on this, thanks so much!

Frederiek

Mar 30 2015, 10:48 AM

The slideshow at Templateify doesn't have a number in the HREFs of the links. And though there are links around the images, they go nowhere. They use # in the HREFs, but your HREFs have numbers (from 1 to 5). Are these links really supposed to go somewhere? Maybe you are able to change those HREFs in Blogger.

pandy

Mar 30 2015, 11:17 AM

I thought the hash signs were place holders and that they should be replaced by URLs.

But I think I'm on to something now. I tried my version again and now it didn't work anymore and I haven't changed it. So I started to click at different spots. If I click at the bottom, below the caption text, it works. If I click above the caption text it works not. I've tried with 5 different URLs now and as long as I click the right part of the image it works.

So the link for some reason doesn't cover the whole image. Maybe it's your positioning. We have to have a new look at that.

pandy

Mar 30 2015, 11:21 AM

If you try the code you posted with real URLs in the hrefs and hold the cursor over different parts of the image you can see in the statusbar that two links are active, the one for the last slide is always above the caption and the one for the current slide below the caption.

This is getting fun!

Tarquinius

Mar 30 2015, 02:35 PM

QUOTE(Frederiek @ Mar 30 2015, 11:48 AM)

No actually I'm aware of that.

As it was pointed out earlier-- the # symbols are placeholders and my numbering was to tell me which href pertainted to which slide (1 = slide 1 etc).

I have to admit prior to making this a live on the forum I *might* have become so frustrated with this issue that I replaced the numbers with swear words in increasing vulgarity

Tarquinius

Mar 30 2015, 02:38 PM

QUOTE(pandy @ Mar 30 2015, 12:21 PM)

Funny enough I had discovered something similar which I vaguely described in my OP

QUOTE

I did a bit of testing and I cannot figure anything out. One suspicion I had and I saw this only a few times was that the linking was correct ONLY WHEN the animation for the tooltip was activated (e.g., I hovered my mouse over it to cue the animation).

However, I felt like it was a weird claim which couldn't be replicated too well-- hence why I didn't elaborate (afterall I DID want to appear somewhat non-newbish to you guys).

But I have experimented with wrapping the <a href> </a> around different parts of the list item to see if I could extend or decrease the range.

I also attempted to see if it was the tooltip animation that was somehow impeding this.

So now I'm trying to think through this logically, given the top half and bottom half discrepancy.

Could this be a mouse positioning error in that it is too sensitive or not sensitive enough? Or is it an href wrapping issue?

Tarquinius

Mar 30 2015, 03:19 PM

I just used the mouseover Pick an Element function with the F12 status bar and it looks like there are 4 regions which the image contains. And whenever you move your mouse around the image, the image regions change. Look at the pics below.
Click to view attachment

pandy

Mar 31 2015, 03:45 AM

OK, it's the positioning and maybe the heights applied. Haven't figured out how to make it right yet though.

ATM I've "fixed" it so the first URL is the one that goes for all slides.

Tarquinius

Mar 31 2015, 08:01 AM

QUOTE(pandy @ Mar 31 2015, 04:45 AM)

OK, it's the positioning and maybe the heights applied. Haven't figured out how to make it right yet though.

ATM I've "fixed" it so the first URL is the one that goes for all slides.

Haha! Yeah I was able to achieve that too....I forget exactly how but it was some sort of combination between making both position's absolute, or relative or eliminating the declarations altogether...

Tarquinius

Mar 31 2015, 10:21 AM

Okay so my next finding was this:

As you hypothesized pandy, you seem to be correct there are only two regions which show up on the image. The 4 that I got was guidelines as a result of the header.

However what I've discovered is that my original thought seems to be gaining some evidence-- when you activate the tooltip the selection area increases dramatically. When you don't however, the image href region seems to stop right before the tooltip...

So it seems like that there is something which is stopping the href from wrapping around the entire image PLUS tooltip.

Also when you do switch regions, the image size as purported by the console remains the same, so I come back to it seems to be an href wrapping issue that seems to supercede the measurements of the image itself.

Tarquinius

Mar 31 2015, 03:59 PM

Another finding-- I ended up disabling the tooltip animation and moved the href wrap from the image to the little header text, so that way only the title is hotlinked.

It worked UNTIL I made this change to the fifth slide and suddenly all of my title hotlinks were again back to pointing at slide 5. I spent the rest of the day before this playing with the css code.

Overall it seems that this again more evidence for the fact that this could be an href wrapping issue wherein the format of all of these concurrent hrefs is somehow defaulting to the bottom hotlink....

pandy

Mar 31 2015, 05:10 PM

We'll get to the bottom of this yet. Haven't had time to look at it today, or your changes, but tommorrow is another day, they say.

Tarquinius

Apr 1 2015, 08:16 AM

QUOTE(pandy @ Mar 31 2015, 06:10 PM)

We'll get to the bottom of this yet. Haven't had time to look at it today, or your changes, but tommorrow is another day, they say.

Ha no problem! I'm so grateful for any and all help I've received from you and this forum. Like I said before, I haven't gotten it anywhere else...

Any news or developments I make on my end I'll make sure to document here

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.