Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 29 of 29
  1. #16
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Any Suggestions?
    Yes, you still do not have this in your css:

    Code:
    #ticker-wrapper{position:relative}

  2. #17
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Yes, you still do not have this in your css:

    Code:
    #ticker-wrapper{position:relative}
    I do have it here, perhaps it's in the wrong place? (p.s-you have been a great help so far-THANK YOU!)

    Also please understand my access and editing to this code on my site. Basically i just have an empty box for "additional CSS." There i can add or edit code-i don't have access to "line" items. It looks prtty much as you se below in a box. So if you need me to change anything-it works best if you just change the code where you want and let me copy the whole new code top to bottom and i just paste over the old code. Sorry, surely a noob here.


    Code:
    #ticker-wrapper * {
            margin-left: auto;
            margin-right: auto;
    
    }
    
    #ticker-wrapper.has-js {
        margin: 20px auto 20px auto;
        padding: 0px 20px;
        width: 870px;
        height: 30px;
        display: block;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background-color: #f8f0db;
        font-size: 1.1em;
        #ticker-wrapper{position:relative}
    }
    #ticker {
        width: 830px;
        height: 30px;
        display: block;
        position: relative;
        overflow: hidden;
        background-color: #f8f0db;
    }
    #ticker-title {
        padding: 5px;
        color: #990000;
        font-weight: bold;
        background-color: #f8f0db;
        text-transform: none;
    }
    #ticker-content {
        margin: 0px;
        padding: 5px;
        position: absolute;
        color: #1F527B;
        font-weight: normal;
        background-color: #f8f0db;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1.2em;
    
    }
    #ticker-content:focus {
        none;
    }
    #ticker-content a {
        text-decoration: none;    
        color: #1F527B;
    }
    #ticker-content a:hover {
        text-decoration: underline;    
        color: #0D3059;
    }
    #ticker-swipe {
        padding-top: 9px;
        position: absolute;
        top: 0px;
        background-color: #f8f0db;
        display: block;
        width: 800px;
        height: 23px; 
    }
    #ticker-swipe span {
        margin-left: 1px;
        background-color: #f8f0db;
        border-bottom: 1px solid #1F527B;
        height: 12px;
        width: 7px;
        display: block;
    }
    #ticker-controls {
        list-style-type: none;
        margin: 0;
        padding: 8px 0 0;
        position: absolute;
        right: 30px;
        top:45;
    }
    #ticker-controls li {
        padding: 0px;
        margin-left: 5px;
        float: left;
        cursor: pointer;
        height: 16px;
        width: 16px;
        display: block;
    }
    #ticker-controls li#play-pause {
        background-image: url('../images/controls.png');
        background-position: 32px 16px;
    }
    #ticker-controls li#play-pause.over {
        background-position: 32px 32px;
    }
    #ticker-controls li#play-pause.down {
        background-position: 32px 0px;
    }
    #ticker-controls li#play-pause.paused {
        background-image: url('../images/controls.png');    
        background-position: 48px 16px;
    }
    #ticker-controls li#play-pause.paused.over {
        background-position: 48px 32px;
    }
    #ticker-controls li#play-pause.paused.down {
        background-position: 48px 0px;
    }
    #ticker-controls li#prev {
        background-image: url('../images/controls.png');
        background-position: 0px 16px;        
    }
    #ticker-controls li#prev.over {
        background-position: 0px 32px;        
    }
    #ticker-controls li#prev.down {
        background-position: 0px 0px;        
    }
    #ticker-controls li#next {
        background-image: url('../images/controls.png');    
        background-position: 16px 16px;    
    }
    #ticker-controls li#next.over {
        background-position: 16px 32px;    
    }
    #ticker-controls li#next.down {    
        background-position: 16px 0px;    
    }
    .js-hidden {
        display: none;
    }
    #no-js-news {
        padding: 10px 0px 0px 45px; 
        color: #F8F0DB;
    }
    .left #ticker-swipe {
        left: 80px;
    }
    .left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
        float: left;
    }
    .left #ticker-controls {
        padding-left: 6px;
    }
    .right #ticker-swipe {
        right: 80px;
    }
    .right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
        float: right;
    }
    .right #ticker-controls {
        padding-right: 6px;
    }
    Last edited by tommydamic68; 02-13-2012 at 10:37 AM.

  3. #18
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    This

    Code:
    #ticker-wrapper.has-js {
        margin: 20px auto 20px auto;
        padding: 0px 20px;
        width: 870px;
        height: 30px;
        display: block;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background-color: #f8f0db;
        font-size: 1.1em;
        #ticker-wrapper{position:relative}
    }
    Should be this

    Code:
    #ticker-wrapper.has-js {
        margin: 20px auto 20px auto;
        padding: 0px 20px;
        width: 870px;
        height: 30px;
        display: block;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background-color: #f8f0db;
        font-size: 1.1em;
      
    }
     #ticker-wrapper{position:relative}

  4. Users who have thanked SB65 for this post:

    tommydamic68 (02-14-2012)

  5. #19
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    This

    Code:
    #ticker-wrapper.has-js {
        margin: 20px auto 20px auto;
        padding: 0px 20px;
        width: 870px;
        height: 30px;
        display: block;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background-color: #f8f0db;
        font-size: 1.1em;
        #ticker-wrapper{position:relative}
    }
    Should be this

    Code:
    #ticker-wrapper.has-js {
        margin: 20px auto 20px auto;
        padding: 0px 20px;
        width: 870px;
        height: 30px;
        display: block;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background-color: #f8f0db;
        font-size: 1.1em;
      
    }
     #ticker-wrapper{position:relative}
    Alas....it works! Thank you for your help! You have been a gentleman and a scholar!

  6. #20
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi guys- need help with this code again. I am trying to make this status bar have a shadow as the "share" box above it in the attachment. the code i use for that is below as well. Any help would greatly be appreciated.

    The code for the news ticker~

    Code:
    #ticker-wrapper * {
            margin-left: auto;
            margin-right: auto;
    
    }
    #ticker-wrapper.has-js {
        margin: 20px auto 20px auto;
        padding: 0px 20px;
        width: 870px;
        height: 30px;
        display: block;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background-color: #e5dcdc;
        font-size: 1.1em;
    }
     #ticker-wrapper{position:relative}
    
    #ticker {
        width: 830px;
        height: 30px;
        display: block;
        position: relative;
        overflow: hidden;
        background-color: #e5dcdc;
    }
    #ticker-title {
        padding: 5px;
        color: #990000;
        font-weight: bold;
        background-color: #e5dcdc;
        text-transform: none;
    }
    #ticker-content {
        margin: 0px;
        padding: 8px;
        position: absolute;
        color: #1F527B;
        font-weight: normal;
        background-color: #e5dcdc;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1.2em;
    
    }
    #ticker-content:focus {
        none;
    }
    #ticker-content a {
        text-decoration: none;    
        color: #1F527B;
    }
    #ticker-content a:hover {
        text-decoration: underline;    
        color: #0D3059;
    }
    #ticker-swipe {
        padding-top: 9px;
        position: absolute;
        top: 0px;
        background-color: #f8f0db;
        display: block;
        width: 800px;
        height: 23px; 
    }
    #ticker-swipe span {
        margin-left: 1px;
        background-color: #f8f0db;
        border-bottom: 1px solid #1F527B;
        height: 12px;
        width: 7px;
        display: block;
    }
    #ticker-controls {
        list-style-type: none;
        margin: 0;
        padding: 8px 0 0;
        position: absolute;
        right: 30px;
        top:45;
    }
    #ticker-controls li {
        padding: 0px;
        margin-left: 5px;
        float: left;
        cursor: pointer;
        height: 16px;
        width: 16px;
        display: block;
    }
    #ticker-controls li#play-pause {
        background-image: url('../images/controls.png');
        background-position: 32px 16px;
    }
    #ticker-controls li#play-pause.over {
        background-position: 32px 32px;
    }
    #ticker-controls li#play-pause.down {
        background-position: 32px 0px;
    }
    #ticker-controls li#play-pause.paused {
        background-image: url('../images/controls.png');    
        background-position: 48px 16px;
    }
    #ticker-controls li#play-pause.paused.over {
        background-position: 48px 32px;
    }
    #ticker-controls li#play-pause.paused.down {
        background-position: 48px 0px;
    }
    #ticker-controls li#prev {
        background-image: url('../images/controls.png');
        background-position: 0px 16px;        
    }
    #ticker-controls li#prev.over {
        background-position: 0px 32px;        
    }
    #ticker-controls li#prev.down {
        background-position: 0px 0px;        
    }
    #ticker-controls li#next {
        background-image: url('../images/controls.png');    
        background-position: 16px 16px;    
    }
    #ticker-controls li#next.over {
        background-position: 16px 32px;    
    }
    #ticker-controls li#next.down {    
        background-position: 16px 0px;    
    }
    .js-hidden {
        display: none;
    }
    #no-js-news {
        padding: 10px 0px 0px 45px; 
        color: #F8F0DB;
    }
    .left #ticker-swipe {
        left: 80px;
    }
    .left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
        float: left;
    }
    .left #ticker-controls {
        padding-left: 6px;
    }
    .right #ticker-swipe {
        right: 80px;
    }
    .right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
        float: right;
    }
    .right #ticker-controls {
        padding-right: 6px;
    }
    This code in the "share" box code~

    Code:
    <div class="shadow1">
    	<div class="content">SHARE CONTENT
    		
    	</div>
    </div>
    Attached Thumbnails Attached Thumbnails CSS positioning of buttons help-screen-shot-2013-04-18-8.10.19-pm.jpg  

  7. #21
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Add class shadow1 to your html for #ticker-wrapper.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  8. #22
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Add class shadow1 to your html for #ticker-wrapper.
    Thanks for the reply, where exactly do I add it? not in the css? Here is the html - there are two parts to it, where would it be added? Your help is appreciated. Would i use the entire piece of code shadow1? Close it with </div>?

    Code:
    <div class="shadow1">
    	<div class="content">
    
    	</div>
    </div>

    Code:
    <!--ticker-->
    <div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
    <script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
        <script type="text/javascript">
    <!--
        for (var i = 0; i < threads.length; i++)
        {
            document.write('<li><a href="{vb:raw vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' + threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' + '<span style="color: red;">Posted By:</span>'+ '&nbsp;' + threads[i]['poster'] + '</a>' + '</li>');
        }
    //-->
    </script>
    </ul>
    </div>
    Code:
    <!--ticker-->
    <script src="js/jquery.ticker.js" type="text/javascript"></script>
    <script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
    <script type="text/javascript">
        $(function () {
            $('#js-news').ticker();
        });
    </script>
    Last edited by tommydamic68; 04-19-2013 at 10:35 AM.

  9. #23
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The shadow is applied to the other element because that element has the class shadow1, which is applying the shadow through css.

    So, you need to add the class to the element in your html:

    Code:
    <div id="ticker-wrapper" class="no-js shadow1">
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  10. #24
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    The shadow is applied to the other element because that element has the class shadow1, which is applying the shadow through css.

    So, you need to add the class to the element in your html:

    Code:
    <div id="ticker-wrapper" class="no-js shadow1">
    I added it here with no luck. Do I need to add anything on the css end?

    Code:
    <!--ticker-->
    <div id="ticker-wrapper" class="shadow1">
    <ul id="js-news" class="js-hidden">
    <script type="text/javascript" src="{vb:raw vboptions.bburl}/external.php?&type=js"></script>
        <script type="text/javascript">
    <!--
        for (var i = 0; i < threads.length; i++)
        {
            document.write('<li><a href="{vb:raw vboptions.bburl}/showthread.php?t=' + threads[i]['threadid'] + '">' + threads[i]['title'] + '</a>' + '&nbsp;&nbsp;&nbsp;' + '<span style="color: red;">Posted By:</span>'+ '&nbsp;' + threads[i]['poster'] + '</a>' + '</li>');
        }
    //-->
    </script>
    </ul>
    </div>
    Last edited by tommydamic68; 04-19-2013 at 10:50 AM.

  11. #25
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It's not added on your site. That element now has the additional class left however.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  12. #26
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You actually have two elements with id ticker-wrapper in your html. You've added the class to the wrong one - the one within #slidebox. You should only have one element with any given id.

    Add the class to the other element.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  13. Users who have thanked SB65 for this post:

    tommydamic68 (04-20-2013)

  14. #27
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    It's not added on your site. That element now has the additional class left however.
    Sorry, not sure what you mean? Where does the change take place? Not in the HTML code? Or is it on my server end in the script you mean?

  15. #28
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    See my previous reply...
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  16. Users who have thanked SB65 for this post:

    tommydamic68 (04-20-2013)

  17. #29
    New Coder
    Join Date
    Feb 2012
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    See my previous reply...

    Got it! I had a duplicate code in there for some unknown reason, removed it and aded to the right one. Thanks once again SB65!

    Attached Thumbnails Attached Thumbnails CSS positioning of buttons help-screen-shot-2013-04-20-6.36.14-am.jpg  


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •