www.webdeveloper.com
Results 1 to 9 of 9

Thread: Fill Sidebar with ads according to page length

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    5

    Unhappy Fill Sidebar with ads according to page length

    I have a main content area and a sidebar. In the sidebar I want to display various affiliate banner ads and/or Google ads. I found a free JavaScript that allows me to rotate various ads in whatever location I choose. The problem I'm having is that my pages vary in length and I'm looking for a way for the JavaScript to only fill ads to the length on my content area for each page. Otherwise I will either have a lot of unwanted whitespace on some pages or a long length of ads in the sidebar that push out the length of shorter pages. Either way it look bad.

    Here's a link to my page that is work. http://www.christian-life-advisor.com/indexNewTest.html

    The JavaScript rotation I found requires that I place the following code for each instance of an ad that I want to appear. Since I don't know how many each page needs without manually coding each page this is not an elegant solution. Any ideas? I only barely understand JavaScript at this time and have no idea how to proceed on my own.

    <script type="text/javascript">
    show_banners('sidebar_125x125');
    </script>

    I really appreciate any help you folks are willing to provide.

    Thanks,
    Sterve

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <div id="sidebar" class="sidebar" align="center" > <!-- Begin sidebar -->
        <br>
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-3560377613002527";
    /* Basic Skyscraper */
    google_ad_slot = "8273726923";
    google_ad_width = 160;
    google_ad_height = 600;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
        <br>
        <br>
        <br>
        <br>
        <script type="text/javascript">
    		show_banners('sidebar_125x125');
    	</script>
        <br>
        <br>
        <br>
        <br>
    	<script type="text/javascript">
    		show_banners('sidebar_125x125');
    	</script>
       <br>
        <br>
        <br>
        <br>
    	<script type="text/javascript">
    		show_banners('sidebar_125x125');
    	</script>
    <!-- end .sidebar --></div>
    
    <div id="content" class="content"> <!-- Begin content -->
    right down the bottom of the page

    Code:
    .......
    <script type="text/javascript">
    
    document.getElementById('sidebar').style.overflow='hidden';
    document.getElementById('sidebar').style.height=document.getElementById('content').offsetHeight-10+'px';
    
    </script>
    
    </body>
    </html>
    or

    Code:
    var sb=document.getElementById('sidebar');
    while (sb.offsetHeight>document.getElementById('content').offsetHeight){
     sb.removeChild(sb.lastChild);
    }
    or
    Last edited by vwphillips; 12-17-2012 at 02:12 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2012
    Posts
    5
    Vic,

    This works really well. I appreciate the help. The only issue still remaining is banners get chopped off if they do not have room to fully display in the allocated space. Is there a way to have the bottom banner not load at all unless there is enough room for it to completely display?

    Blessings,
    Sterve

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    try the second snippet I posted, the removes elements from the slide div until it is <= the content div height

    Code:
    var sb=document.getElementById('sidebar');
    while (sb.offsetHeight>document.getElementById('content').offsetHeight){
     sb.removeChild(sb.lastChild);
    }
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Dec 2012
    Posts
    5
    Yes, the other snippet works better. Although it does cause a problem with the banner rotation script I found when the banner placeholders assigned to the page do not fit on the page. It throws an error for each banner that can't be displayed after about 30 seconds.

    The banner rotation script requires that I place code snippets such as the following:

    <script type="text/javascript">
    show_banners('sidebar_120x240');
    </script>

    It's not an elegant solution since I have to hard code a bunch of placeholders onto the page just in case it may be long enough to display them. Your code then only displays the ones that will fit and errors are thrown for all of the others that do not fit.

    Your first snippet does not cause the errors so I'm guessing the banners are all being loaded even if they are not all being displayed. Do you know of a way to kind of marry the two snippets together to solve this problem?

    You can see the issue by loading the following test page: http://www.christian-life-advisor.co...consider2.html

    Thanks,
    Sterve

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    It is difficult for me to extract what I need for the page

    I you could make a simple page with just the side DIV, add scripts, rotation script and CSS I may be able to offer more held
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Dec 2012
    Posts
    5
    I'm not really sure how to send you what you are requesting. I've pasted a page that mainly has a sidebar, rotation code, and your code. Below that I'll paste the code from the rotation script. Hopefully it will all make sense to you. Too bad I can't attache files. Here's the link to the page with the Rotation Code. It was free so I used it. http://www.spyka.net/scripts/javascr...banner-rotator.

    With the page chopped up as you requested I am not getting the errors like I do with the full page.
    Here's the link to the live page: http://www.christian-life-advisor.com/broken.html
    Here's the link to the page that throws the errors after 30 seconds: http://www.christian-life-advisor.com/indexNewTest.html

    If this is not what you need please let me know and I'll try again. I really appreciate your help.

    Thanks,
    Sterve


    Page Code:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta name="Description" content="nothing">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <title>broken</title>
    <link href="support-files/mainNewTest.css" rel="stylesheet" type="text/css">
    <script src="support-files/SpryMenuBar.js" type="text/javascript"></script>
    <script src="support-files/banners.min.js" type="text/javascript"></script>
    </head>

    <body>
    <div class="wrapper"> <!-- Begin wrapper -->
    <div class="header"><img src="image-files/logo.jpg" alt="header" width="960" height="150" align="middle">
    <!-- end .header --></div>

    <div id="sidebar" class="sidebar" align="center"> <!-- Begin sidebar -->
    <br>
    <script type="text/javascript">
    show_banners('sidebar_125x125');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x240');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x600');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_160x300');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x90');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_125x125');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x600');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_125x125');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x240');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x600');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_160x300');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x90');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_125x125');
    </script>
    <br>
    <br>
    <script type="text/javascript">
    show_banners('sidebar_120x600');
    </script>
    <!-- end .sidebar --></div>

    <div id="content" class="content"> <!-- Begin content -->
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>
    A<br>

    <!-- end content --></div>

    <!-- end wrapper --></div>

    <script type="text/javascript">
    var sb=document.getElementById('sidebar');
    while (sb.offsetHeight>document.getElementById('content').offsetHeight){
    sb.removeChild(sb.lastChild);
    }
    </script>

    </body>
    </html>




    CSS Code

    @charset "utf-8";
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-color: #272262;
    }

    ul, ol, dl {
    padding: 0;
    margin: 0;
    }

    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    }

    a img {
    border: none;
    }

    a:link {
    color:#00F;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    a:visited {
    color: #939;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: underline;
    }

    a:hover, a:active, a:focus {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #F00;
    background-color: #39F;
    }

    .wrapper {
    width: 960px;
    margin:
    0px auto;
    background-color: #F9F9F9;
    }

    .header {
    background-color: #0F3;
    }

    .header img {
    display: block;
    }

    .sidebar {
    width: 210px;
    float: right;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #F9F9F9;
    }

    #nav {
    height: 34px;
    }

    .content {
    width: 710px;
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #F9F9F9;
    font-size: 1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    .content ul, .content ol {
    padding: 0 15px 15px 40px;
    }

    ul.nav {
    list-style: none;
    border-top: 1px solid #666;
    margin-bottom: 15px;
    }

    ul.nav li {
    border-bottom: 1px solid #666;
    }

    ul.nav a, ul.nav a:visited {
    padding: 5px 5px 5px 15px;
    display: block;
    text-decoration: none;
    background: #8090AB;
    color: #000;
    }

    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background: #6F7D94;
    color: #FFF;
    }

    .footer {
    padding: 10px 0;
    position: relative;
    clear: both;
    background-color: #369;
    font-size: 1em;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-color: #FFF;
    }

    .fltrt {
    float: right;
    margin-left: 8px;
    }

    .fltlft {
    float: left;
    margin-right: 8px;
    }

    .clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

    .clear {
    clear: both;
    display: block;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
    width: 0px;
    }

    #mainTitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    color: #272262;
    line-height: normal;
    }

    #subTitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #272262;
    line-height: normal;
    }

    #copyright {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .7em;
    text-align: center;
    color: #000;
    line-height: normal;
    }

    #sbi {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .9em;
    text-align: center;
    color: #000;
    line-height: normal;
    }

    #sbi-ad {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    color: #000;
    line-height: normal;
    }

    #ref {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .7em;
    text-align: center;
    color: #000;
    line-height: normal;
    }

    #author1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
    text-align: center;
    color: #000;
    line-height: normal;
    }

    #author2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .7em;
    text-align: center;
    color: #000;
    line-height: normal;
    }

    .sectionSubTitle {
    font-weight: bold;
    color: #272262;
    margin-bottom: 3px;
    }

    ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    }

    ul.MenuBarActive {
    z-index: 1000;
    }

    ul.MenuBarHorizontal li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 16px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    float: left;
    }

    ul.MenuBarHorizontal ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    z-index: 1020;
    cursor: default;
    width: 8em;
    position: absolute;
    left: -1000em;
    }

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
    left: auto;
    }

    ul.MenuBarHorizontal ul li {
    width: 160px;
    }

    ul.MenuBarHorizontal ul ul {
    position: absolute;
    margin: -5% 0 0 95%;
    }

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
    left: auto;
    top: 0;
    }

    ul.MenuBarHorizontal ul {
    border: 1px solid #CCC;
    }

    ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    background-color: #369;
    padding: 0.3em 0.3em;
    color: #FFFFFF;
    text-decoration: none;
    border-width:2px;
    border-color: #cddce7 #5c6a72 #5c6a72 #cddce7;
    border-style: solid solid solid solid;

    }

    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    background-color: #272262;
    color: #FFF;
    }

    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    background-color: #272262;
    color: #FFF;
    }

    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }

    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
    background-image: url(SpryMenuBarRight.gif);

    background-repeat: no-repeat;
    background-position: 95% 50%;
    }

    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }

    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }

    ul.MenuBarHorizontal iframe {
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    }

    @media screen, projection {
    ul.MenuBarHorizontal li.MenuBarItemIE {
    display: inline;
    f\loat: left;
    background: #FFF;
    }
    }

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    I have spent some time on this but cannot find a better solution
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Dec 2012
    Posts
    5
    I appreciate your help Vic. God bless you. Have a fabulous Christmas!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles