Forums

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

Home Forums JavaScript [Solved] I can not figure this out

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25778
    cybershot
    Participant

    I am working with the twitter script that chris put up on this site.

    https://css-tricks.com/video-screencasts … r-updates/

    I have integrated it into a site that I have been working on

    http://www.wilsonwrites.com/

    using this script to make it toggle

    http://www.sohtanaka.com/web-design/eas … -tutorial/

    Demo can be found here
    http://www.sohtanaka.com/web-design/examples/toggle/

    Here is the css for the twitter and the css for the toggle that I have in my page

    Code:
    /*******/twitter scroll box *****/

    h2.trigger {
    padding: 0 0 0 50px;
    margin: 0 0 5px 0;
    background-image: url(h2_trigger_a.gif);
    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: left;

    }
    h2.trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    }
    h2.trigger a:hover { color: #ccc; }
    h2.active {background-position: left bottom;} /*–When toggle is triggered, it will shift the image to the bottom to show its “opened” state–*/

    .toggle_container {
    margin: 0 auto;
    padding: 0 0 50px 0;
    border-top: 1px solid #d6d6d6;
    /* background: #f0f0f0 url(twitter/images/toggle_block_stretch.gif) repeat-y left top; */
    background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;
    overflow: hidden;
    font-size: 1.2em;
    width: 700px;
    clear: both;
    }
    .toggle_container .block {
    padding: 20px; /*–Padding of Container–*/

    /*background: url(twitter/images/toggle_block_btm.gif) no-repeat left bottom; /*–Bottom rounded corners–*/

    }

    /*
    Twitter Page
    Chris Coyier
    https://css-tricks.com
    */

    #twitter_div {

    height:360px;
    overflow:auto;
    width:376px;
    margin:50px 0 0 150px;
    }

    ul#twitter_update_list {
    list-style: none;
    font-size: 14px;
    margin-top: 25px;
    }
    ul#twitter_update_list li {
    margin-bottom: 10px;
    padding: 10px;
    color: #7a8a99;
    background: url(images/transpBlue.png);
    }
    a { color: #96997a; }

    You can download the entire package already assembled here
    http://www.creativeeventsdesign.com/jquery.rar

    My problem is that I can not get the image that is suppose to be displayed to show up in wordpress. It shows up on the test page in html. Not in the correct spot, but it’s there. The grey one with the plus sign on it. the only thing that shows are the words.(+View My Twitter Tweets) I can not figure out why the image won’t show. Please help.

    #62299
    Chris Coyier
    Keymaster

    I’m not 100% sure, but I think the problem is in how you are doing your section comments in your CSS. That slash in the middle is ending the comment:

    Code:
    /*******/twitter scroll box *****/

    Try this instead

    Code:
    /*
    Twitter Scroll Box
    */
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.