SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Making my twitterticker adjust

    Hi.

    So I have this div called "tweets" wich is a twitterticker, so everytime I write a tweet it updates on my site, and some tweets are long and some are not, so the div size changes, anyways. This div will be the div that is the longest to the bottom, and it would be great so everytime the "tweets" div become smaller, the website gets smaller in height.

    I hope you understand.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/styles.css"rel="stylesheet" type="text/css">
    <link href="css/style for jquery.css"rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    
    
    
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
    
    
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    
    
    <script type="text/javascript" src="js/script.js"></script>
    
    
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
    
    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script> 
    
     <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
    
    
    
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->
    
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    
    <body onload="MM_preloadImages('images/social/facebook rollover.png','images/social/youtube rollover.png','images/social/twitter rollover.png','images/social/vimeo rollover.png','images/social/flick rollover.png','images/social/rss rollover.png')">
    
    
    <div id="unwrapper">
    <div id="wrapper">
    
    
    <div id="uppercontainer">
    <div id="meny1">
    
    
    
    <ul class="meny1">
    
    <li class="menytext"><a href="index.html">START</a></li>
    <li class="menytext"><a href="distrikt.html">DISTRIKT</a></li>
    <li class="menytext"><a href="media.html">MEDIA</a></li>
    <li class="menytext"><a href="JAM.html">JAM</a></li>
    
    </ul>
    
    
    
    
    
    
    
    
    </div>
    
    <div id="logodiv"><a href="index.html"><img src="images/Logo.png" width="122" height="31" border="0" id="logotyp" /></a>
    </div>
    
    <div id="meny2">
    
    
    
    
    <ul class="meny2">
    
    <li class="menytext"><a href="gästbok.html">GÄSTBOK</a></li>
    <li class="menytext"><a href="medlem.html">MEDLEM</a></li>
    <li class="menytext"><a href="om oss.html">OM OSS</a></li>
    <li class="menytext"><a href="kfum.html">KFUM</a></li>
    
    </ul>
    
    
    
    
    
    
    
    
    
    </div>
    </div>
    
    <div id="banner">
    
    
    <div id="wrapper1">
    	<div id="slider_wrapper1">
    		<div id="slider">
            <img src="images/Banner1.png" title="" />
            
             <img src="images/Banner2.png" title="" />
             
                 <img src="images/Banner3.png" title="" />
            
           
    </div>
    
    <div id="htmlcaption" class="nivo-html-caption"></div>
    	</div>
    </div>
    
    
    
    
    
    
    
    
    
    </div>
    
    
    
    <div id="icr">
    <div id="cleft">
    
    <div id="one"></div>
    
    <div id="two">
    
    <iframe id="mai" src="http://player.vimeo.com/video/30695260?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;" width="320" height="180" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    
    
    
    </div>
    
    
    
    </div>
    <div id="cright">
    
    
    
      
      
      
      
      
      
      
      <ul class="social">
    
    <li><a href="https://www.facebook.com/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/social/facebook rollover.png',1)"><img src="images/social/facebook.png" name="Image3" width="43" height="43" border="0" id="Image3" /></a></li>
    <li><a href="http://www.youtube.com/user/AirWipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/social/youtube rollover.png',1)"><img src="images/social/youtube.png" name="Image4" width="43" height="43" border="0" id="Image4" /></a></li>
    <li><a href="https://twitter.com/#!/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/social/twitter rollover.png',1)"><img src="images/social/twitter.png" name="Image5" width="43" height="43" border="0" id="Image5" /></a></li>
    
    <li><a href="http://vimeo.com/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/social/vimeo rollover.png',1)"><img src="images/social/vimeo.png" name="Image6" width="43" height="43" border="0" id="Image6" /></a></li>
    
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/social/flick rollover.png',1)"><img src="images/social/flickr.png" name="Image7" width="43" height="43" border="0" id="Image7" /></a></li>
    
    <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/social/rss rollover.png',1)"><img src="images/social/rss.png" name="Image8" width="43" height="43" border="0" id="Image8" /></a></li>
    
    </ul>
    
          
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/airwipp&amp;width=200&amp;colorscheme=dark&amp;show_faces=false&amp;stream=false&amp;header=false&amp;height:255px" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:70px;" allowtransparency="true"></iframe>
            
            
    
            	<div id="friends"></div>
    
    
        
            <div id="tweets">
            
        
    	
    </div>
            
            
           	<h1></h1>
    	
    
    	<div class="some-fixed-width-container" style="width:242px">
    	
    		<div id="friends"></div>
    	
    	</div>
    	
    	
    	
    	
    
    	<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{	var pageTracker = _gat._getTracker("UA-5465067-6"); pageTracker._trackPageview();} catch(err){}</script>
         
            
                    
    
    
    
    <script type="text/javascript" src="twitter.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#friends').twitterFriends({
    			debug:1
    			,username:'airwipp'
    		});
    	});
    </script>
            
            
            
            
            
      
            
            
    </div>
    
    </div>
    
    
    
    
    
    
    </div>
    
    <div id="footer"></div>
    
    
    
    </div>
    
    
    
    </body>
    </html>
    CSS:

    Code:
    body {background-image:url(../images/BG.jpg); }
    
    #unwrapper {width:1300px; background-image:url(../images/Texture.png); height:auto; margin-left:auto; margin-right:auto; padding-bottom:35px;  }
    
    #wrapper {width:900px;  height:auto; padding-bottom:1px; margin-left:auto; margin-right:auto; padding-top:1px;}
    
    .rubrik {
    	width:280px;
    	height:30px;
    	border-bottom-width: 5px;
    	border-bottom-style: solid;
    	border-bottom-color: #FFF;
    }
    
    .han {; margin-bottom:30px; }
    
    .onetext {color:#FFFFFF; font-family:Oswald; font-size:18px; letter-spacing:0.3px; }
    
    #meny1 {width:375px; height:50px; float:left;  }
    #meny2 {width:375px; height:50px; float:left;  }
    #logodiv {width:150px; height:50px; float:left;  }
    #uppercontainer {width:900px; height:50px; margin-top:35px; background-image:url(../images/UpperBG.png) }
    
    #banner {width:900px; height:370px;  margin-top:30px; }
    
    #logotyp {margin-top:8px; margin-left:15PX; }
    #mainfilm {margin-top:3px; }
    
    
    
    .meny1  { margin-top:20px; }
    .meny1 li  { float:left; padding-left:50px;   }
    
    #one {width:285px; height:710px; ; float:left; }
    
    #two {width:315px; height:710px;  float:left;}
    
    
    .meny2 { margin-top:20px; }
    .meny2 li { float:left; padding-left:40px;   }
    
    #cleft    {
    	float:left;
    	height:710px;
    	width:630px;
    	margin-top:30px;
    
    	
    
    }
    #cright   {
    	float:left;
    	height:710px;
    	width:320px;
    	margin-top:30px;
    }
    
    .menytext {color:#CCCCCC; font-family:oswald; font-size:12px;  letter-spacing:0.3px; }
    .menytext1 {color:#CCCCCC; font-family:Oswald; font-size:19px; letter-spacing:0.3px; }
    
    #icr {height:800px; width:1000px; padding:1px; }
    
    .menytext a:link {color:white; text-decoration:none;}
    .menytext a:visited {color:white;}
    .menytext a:hover   {color:#FF0}
    .menytext a:active  {color:white;} 
    
    
    .social li {float:left; }
    
    .social {float:left;  }
    
    #facebook {margin-top:20px; margin-left:5px; }
    
    .linje {width:275px; float:left; margin-left:23px; background-color:#000 }
    
    #minibilder { height:220px; width:280px; margin-top:10px; }
    
    .minibilder li {float:left; padding-left:6px; padding-right:6px; padding-bottom:10px;  }
    
    
    
    .infotext {color:#999;  margin-top:60px;  font-family:PT Sans narrow; font-size:13px;  }
    
    #twitterticker {width:260px; height:100px; }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    #footer {
    	height:250px;
    	width:900px;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(../images/footer.png);
    	margin-top: 40px;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*---- Users ----*/
    div.tf-users{
    	/* fixed height so container will not flicker within transitions */
    	height:192px;
    	margin-left:10px;
    	width:280px;
    	overflow:hidden;
    }
    /* user img link*/
    div.tf-users a{ 
    	display:block;
    	float:left;
    }
    /* user img */
    div.tf-users img{ }
    
    /*---- Tweets ----*/
    div.tf-tweet{
    	/* fixed height so container will not flicker with different length tweets  */
    	height:300px;
    	padding-bottom:1px;
    	overflow:hidden;
    }
    /* tweet li */
    div.tf-tweet li{
    	border:silver 1px solid;
    	position:relative;
    	padding:2px;
    	list-style-type:none;
    	margin:1px 0;
    	overflow:hidden;
    }
    
    /* tweet author avatar */
    div.tf-tweet span.tf-avatar{
    	display:block;
    	width:48px;
    	height:48px;
    	margin:0 2px 0 2px;
    	left:0;
    	position:absolute;
    	overflow:hidden;
    }
    /* author name */
    div.tf-tweet strong a{
    	margin-right:5px;
    }
    /* tweet body */
    div.tf-tweet span.tf-body {
    	display:block;
    	margin-left:55px;
    }
    /* tweet content */
    div.tf-tweet span.tf-content{
    }
    /* tweet date and source */
    div.tf-tweet span.tf-meta {
    	color:#999999;
    	display:block;
    	font-size:0.764em;
    	margin:3px 0 0;
    }
    div.tf-tweet span.tf-meta a{
    	color:#999999;
    	text-decoration:none;
    }
    div.tf-tweet span.tf-meta a:hover{
    	text-decoration:underline;
    }
    /* customize date link */
    div.tf-tweet a.tf-date { }
    /* customize source link */
    div.tf-tweet a.tf-source { }
    /* customize links */
    div.tf-tweet a.tf-link { }
    /* customize @user links */
    div.tf-tweet a.tf-at { }
    /* customize #hashtags links */
    div.tf-tweet a.tf-hashtag { }
    
    /* ---- Info Link ----- */
    div.tf-info{
    	text-align:right;
    }
    div.tf-info a{
    	text-decoration:none;
    	font-size:9px;
    	font-weight:bolder;
    	color:gray;
    	font-family:tahoma;
    }
    /* TWEETS */
    #tweets {
    	left: 186px;
    	top: 105px;
    	width: 260px;
    	height:auto;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:14px;
    	margin-top:30px;
    }
    #tweets p { font-size: 14px; margin-bottom: 10px; padding: 10px; color: #fff; background-image:url(../images/twitter/transpBlue.png)  }
    #tweets p a { padding-left:2px; }
    #tweets p a img { border:none; }
    
    #ltweets {width:280px; height:57px; background-image:url(../images/LTweets.png); margin-top:20px;  }
    
    
    /* INFORMATION */
    #info {  left: 620px; top: 105px; width: 376px; height:300px; color: #96997a; font-size:14px; }
    #info h1 { font: bold 18px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
    #info h1 small { font-size: 13px; text-transform:uppercase; display: block; color: #ccc; margin-top:10px; }
    #info h2 a { display: block; text-decoration: none; margin: 10px 0; font: italic 13px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
    #info h2 a:hover { color: #90bcd0; }
    #info p { margin:15px 0; }
    #info p a { color: #96997a; }
    
    .big { font-size:20px; }
    .big span { color: #bfe1f1; font-size:24px; }
    
    /* OVERLAY */
    #overlay { left: 168px; top: 87px; width: 408px; height:386px; background-image:url(../images/twitter/transpBlue_overlay.png) }
    #overlay img { position:relative; left:200px; top:189px; }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hello . I do like your attempt to give code, however upon saving that code into a text file to see it ourselves, the only thing we actually see is a white screen, a video player, and a facebook like thingymajigg.

    I do notice, however, you set heights on a lot of your containing divs. Why do you have so many heights set in the first place?

    If we could get the link to the live page, that would be great, and it seems like this fix could be relatively simple .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Live webpage: http://www.kwpwebdesign.se/

    I dont know, wich things shouldnt be "heighted" in my page?

    Thanks.

    // Kevin


    Quote Originally Posted by RyanReese View Post
    Hello . I do like your attempt to give code, however upon saving that code into a text file to see it ourselves, the only thing we actually see is a white screen, a video player, and a facebook like thingymajigg.

    I do notice, however, you set heights on a lot of your containing divs. Why do you have so many heights set in the first place?

    If we could get the link to the live page, that would be great, and it seems like this fix could be relatively simple .

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Stilll confused . You do realize you have a footer element (blank) which is taking up over 200 pixels of height, at the bottom of hte page? I remove some tweets locally and the page doesn't shrink (due to hte middle content still being the tallest)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I want the footer there, but as soon, lets say i write 5 long tweets, then the twitterbox will go over the footer, i want it to push the footer instead of going over it.

    Got it?


    Quote Originally Posted by RyanReese View Post
    Stilll confused . You do realize you have a footer element (blank) which is taking up over 200 pixels of height, at the bottom of hte page? I remove some tweets locally and the page doesn't shrink (due to hte middle content still being the tallest)

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ah, well remove the height on "#icr" and you now need a clearing mechanism on it, so set overflow:hidden; on it.

    I do believe I've linked you to my article about containing floats before, tisk tisk .

    Edit-Sec, you need some other stuff, that should have worked copmletely but other parts of your page are interfering.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Edit-If you don't want to take time to use the clearfix (untested but it should work) on #icr, you could just set clear:both; on the footer and not worry about overflow:hidden; on it.

    I don't know why the tweets are being cut off. Well, the parent height isn't expanding and I don't see a height set anywhere (the overflow:hidden; being the cause of hte cutting off) which would MAKE it be cut off .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Noone of these work the way I wanted them to.

    I want the footer to be pushed down when the ticker gets longer, and when the ticker gets longer it's basically the #icr that should be doing something, what? I don't know.Just not hidden.

    Could you tell me what's not correctly done, since I hate doing things the way it shouldnt be. Thanks

    // Kevin

    Quote Originally Posted by RyanReese View Post
    you need some other stuff, that should have worked copmletely but other parts of your page are interfering.

  9. #9
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ryan, what was done wrong in my webpage?
    Quote Originally Posted by RyanReese View Post
    Edit-If you don't want to take time to use the clearfix (untested but it should work) on #icr, you could just set clear:both; on the footer and not worry about overflow:hidden; on it.

    I don't know why the tweets are being cut off. Well, the parent height isn't expanding and I don't see a height set anywhere (the overflow:hidden; being the cause of hte cutting off) which would MAKE it be cut off .


Bookmarks

Posting Permissions

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