Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 4 1 2 3 ... LastLast
Results 1 to 10 of 31
  1. #1
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    There is a random '>' symbol displaying to the top-left hand side of my rotating header images. See here: http://woodenhillvintage.com/wp

    Can anyone help?

    Here is the code I am using:

    <div class="head_top head_top_spacer clearfix">

    <style type="text/css">
    /* rotator in-page placement */
    div.rotator {
    height:325px;
    }
    /* rotator css */
    div.rotator ul li {
    position:absolute;
    }
    /* rotator image style */
    div.rotator ul li img {
    }
    div.rotator ul li.show {
    z-index:500
    }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"></script>

    <script type="text/javascript">

    function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

    setInterval('rotate()',6000);

    }

    function rotate() {
    //Get the first image
    var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

    //Un-comment the 3 lines below to get the images in random order

    //var sibs = current.siblings();
    //var rndNum = Math.floor(Math.random() * sibs.length );
    //var next = $( sibs[ rndNum ] );


    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

    };


    $(document).ready(function() {
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
    });
    </script>


    <div class="rotator">
    <ul>
    <li class="show"><img src="http://www.woodenhillvintage.com/wp/...ages/head3.jpg" width="703" height="297" alt="pic1" /></a></li>
    <li><img src="http://www.woodenhillvintage.com/wp/...ages/head2.jpg" width="703" height="297" alt="pic2" /></a></li>
    <li><img src="http://www.woodenhillvintage.com/wp/...ages/head1.jpg" width="703" height="297" alt="pic3" /></a></li>
    <li><img src="http://www.woodenhillvintage.com/wp/...ages/head2.jpg" width="703" height="297" alt="pic4" /></a></li>
    </ul>
    </div>

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I don't see it on the page you indicated. Did you already find it?

    If not, close your browser, clear your cache and try again.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Hi, I did as you said and cleared cache/restarted browser, but it's still showing (see attached screenshot).

    I've tried in different browsers and it's the same.

    When I take the code out the symbol disappears, so it must be something to do with the rotating image code I'm using...?
    Attached Images Attached Images

  5. #4
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Sorry. I attached the wrong screenshot at first.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    No wonder I missed it. I was actually looking for an extraneous > character, which is usually what the situation is. Yours, however, is rather different since that little arrow is actually a background with the filename i_bullet.gif.

    It's not your script as such that's causing the problem. It's actually this file:

    http://woodenhillvintage.com/wp/wp-c.../1-default.css

    And this line in particular:
    Code:
    #content
     li { background:url(1-default/i_bullet.gif) no-repeat left 8px;}
    Now, how you choose to solve this is up to you. If you want to use i_bullet.gif in other parts of your site, then you'll have to come up with a CSS rule related to your rotator to override this. If not, then get rid of the line.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    The place to fix this will probably be in your custom.css file

    Try adding this:

    Code:
    #rotator #content li {
        font-size: 14px;
        margin: 0 0 8px;
        padding: 0 0 0 12px;  }
    That should override the theme's main CSS and get rid of the image for you.

    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Actually, that wouldn't work in this case unless Oliver moved his custom.css file below the 1-default.css file. The 1-default.css file is the last css file called. (Not trying to show you up, AlphaMare...this is a weird case.)

    The other thing is that rotator for some reason is a class, which I don't understand. But that's the nature of the script/plugin, not on you, Oliver. So your syntax would actually be #content .rotator li { all the rest of what AlphaMare typed}.

    Again...that's if you want to do it this way. You can do it whatever way you ultimately want, but that's up to you, like I said before.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Thanks so much for helping me out with this. I decided to just get rid of the line as I do not need the bullet icon. Now I just need to figure out how to get the header image inline with the 6 images below the header. It seems the space where the bullet was is still there...

    I am also looking for a way to make the pop-out navigation on the left visible at all times. You will see that at the moment the pop-out menu (Women > Knitwear) gets hidden behind the rotating images when they are in full opacity. You'll notice when the header image fades to a low opacity you can see the 'Knitwear' pop-out menu box.

    Thanks again. Very much appreciated.

  10. #9
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Game - thanks - that's some pretty wonky code - looks like WP with an e-commerce plugin, and they're loading a bazillion CSS - sometimes the CSS is actually specified in the plugin itself and you can really only edit it in the admin backend...
    I love messing around with WP and am currently trying to develop a decent theme - the operative word here, unfortunately, is "mess"ing...
    TheGAME1264 likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Have you tried using the z-index property for the CSS for that menu yet? That might help.

    As far as the rotating images go, I'm assuming by "inline" you mean "left-aligned." Your problem may be twofold:

    1) Your pictures are 703 pixels wide and your content div is only 700 pixels wide.

    2) Your thumbs are 210 pixels and floated to the left.

    What i'd suggest is making your pictures smaller (around 670 pixels wide) and then trying to text-align the .rotator div to the left. I'm not sure it would work, but it may trigger another thought that will.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 4 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com