Search the Community

Right now I have a mobile dropdown that works fine. The only issue I have is that when viewing it on my smartphone, the dropdown gets cut off at the bottom and I am unable to scroll it down to rest of it. Is there a way to fix it so that It's scrollable? Here's my js code of the dropdown. $(document).ready(function() { $(".nav-mobile li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent-arrow"); } }) $(".toggle-mobile-menu").click(function(e) { e.preventDefault(); $(this).toggleClass("active-mobile"); $(".nav-mobile").toggle(); }); adjustMenu(); }); $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { var ww = document.body.clientWidth; if (ww <= 850) { $(".toggle-mobile-menu").css("display", "block"); if (!$(".toggle-mobile-menu").hasClass("active-mobile")) { $(".nav-mobile").hide(); } else { $(".nav-mobile").show(); } $(".nav-mobile li").unbind('mouseenter mouseleave'); $(".nav-mobile li a.parent-arrow").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww > 850) { $(".toggle-mobile-menu").css("display", "none"); $(".nav-mobile").hide(); $(".nav-mobile li").removeClass("hover"); $(".nav-mobile li a").unbind('click'); $(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } }

I am having trouble trying to change the height of a container. I want to shrink the whole thing down. Can anyone help me out? Here is the code I'm working with: /* Header Section css-------------------------------------------------------------- */ body { /* padding:0 30px;*/ font-family: 'Open Sans', sans-serif; background-color: #fff; } #wrapper{ position: relative; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } .container { padding-left: 0px ; padding-right: 0px ; } a:hover, a:focus{ text-decoration: none ; } h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #666; text-shadow: 0 0 1px rgba(0,0,0,0.01); font-family: 'Open Sans', sans-serif; font-weight: 600; } p , .textwidget{ font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 26px; } .head-contact-info{ display: block; text-align: right; padding-top:5px; padding-bottom:2px; padding-left:0; } .head-contact-info li { display: inline; margin-right:10px; font-size:18px; } .head-contact-info li a{color:#fff;} .head-contact-info i { margin-right:8px; font-size:20px; display: inline; } .logo{ text-align:left; padding-bottom:0px; font-family: 'Open Sans', sans-serif; } .logo a{ font-weight: 600; font-family: 'Open Sans', sans-serif; margin-bottom:10px; font-size: 50px; color: #fff; } .logo a:hover{ color: #fff; } .logo p{ font-family: 'Open Sans', sans-serif; margin-top:5px; color: #fff; }

Can someone help me understand why this happens? http://jsfiddle.net/tKehC/1/

site http://allar.cmccd.net html <style type="text/css"> @import url("template.css"); </style> <div class="root"> <div class="header-wrap"> <div class="header"> <?php print render($page['header']); ?> </div> </div> <div class="subheader-wrap"> <div class="subheader"> <div class="nav-border-left"></div> <div class="nav-wrap"> <div class="navlink"> <?php if (isset($logo)): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo" class="logo"> <img src="<?php print $logo; ?>" alt="Jean & Tony’s Place a family website" height="50px" width="150px"/> </a> <?php endif; ?> <?php print theme('links', array('links' => $main_menu))?> </div> </div> <div class="nav-border-right"></div> </div> </div> <div class="body-wrap"> <div class="body"> <div class="content-border-left"></div> <div class="content-wrap"><?php print render($page['content']); ?></div> <div class="content-border-right"></div> </div> </div> <div class="subfooter-wrap"> <div class="subfooter"> <div class="subfooter-border-left"></div> <div class="subfooter-content-wrap"></div> <div class="subfooter-border-right"></div> </div> </div> <div class="footer-wrap"> <div class="footer"><?php print render($page['footer']); ?></div> </div> </div> css: .header-wrap, .subheader-wrap, .body-wrap, .subfooter-wrap, .footer-wrap {float:left; width:100%; clear:both; background:#000;} .header, .subheader, .nav, .body, .subfooter, .footer {width:1100px; margin:0 auto;} .body {float:none;} /* needs a height*/ .header {height:50px; width:960px;} .nav-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/topleft-wire.png) no-repeat right;} .nav-wrap{float:left;celar:both; width:960px;height:70px;} .nav-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/topright-wire.png) no-repeat;} .content-border-left {float:left;clear:left; height:100%; width:70px; background:url(files/images/left-wire.png) repeat-y;} .content-wrap{float:left;width:960px; color:#FFF; font-family:Lucida Grande, Verdana, sans-serif;} .content-border-right {float:left;clear:right; width:70px; background:url(files/images/right-wire.png)repeat-y;} .subfooter {height:70px;} .subfooter-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/bottomleft-wire.png) no-repeat right;} .subfooter-content-wrap{float:left;celar:both; width:960px;height:70px; background:url(files/images/bottom-wire.png);} .subfooter-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/bottomright-wire.png) no-repeat;} .links{margin:0;padding:0;} .navlink {} .navlink li {display:inline;} .navlink a {float:left; height:33px;font-weight:bold;line-height:32.75px; 'Times New Roman', Times, serif; font-size:16px;padding:0 25px; color:#FFF;text-align:center; border-right:1px solid #FFF;text-decoration:none; text-shadow:0px 1px 0px #185edf;} .navlink a:hover {background:url(/sites/all/themes/ssccix/files/nav-arrow.png) no-repeat center top; text-decoration:none;} .navlink a.active {background:#FFF; no-repeat center top;color:#091342;} .footer {} /*.border-left {float:left;height:100%;clear:left; width:2px; background:#fff;} .content-wrap{float:left;height:100%; width:960px; background:#555;} .border-right {float:left;height:100%;clear:right; width:2px; background:#fff;} */ The problem is that as you see the site the content is pushed to the left and the white borders on the left and right disappear, though they will show up if i have a pre-set height in the .body{} but than it will not auto height for the text. any ideas on the problem?

Hey all, I have a two column webpage. I would like to make my left column equal the height of the right column. The left column contains my navigation and future advertisements. My right column is my content. I would like to learn how to match the column height of the left column to that of the right column so I can add some Jquery and make the navigation/ad scroll with the user. How can this be achieved? The page is: http://cronanpilotcar.byethost33.com/page/states

Hi, New coder here! I'm making a php If loop that will post my image a set number of times (depending on user input in a text box), and I have that all figured out. However, I can't figure out how to rotate the image a random amount of degrees and have a random width/height for each image. Will rand generate new numbers for each time the image is echo-ed, or will it give the same number for all images? This is what I have: <?php function pic($picture) { $degree = rand(0,360) $num = rand(50,250) $total = 0; while ($total < $picture){ echo '<img src=blabla.gif width="$num" height="$num">'; $total = $total + 1; } } $picture = $_GET['input']; $a = pic($picture); } ?> Thanks in advance!

Hi, I'm trying to make it so that my Wrapper fixes to the screen resolution depending on your screen, so I'm basically debugging on both my laptop and my 32"" monitor. Would they be any possible way to make it so: "height: 100%" "width: 100%" If so how would I do this method? I've got this far atm: (The wrapper is help inside the main Container which just has "width: 100%; min-width: 100%; padding: 0; margin: 0; " Excuse my sloppy coding. .index_wrapper { width: 100%; height: 1600px; min-width: 500px; max-width: 100%; min-height: 500px; max-height: 1600px; margin-top: 50px; margin-bottom: 25px; margin-right: auto; margin-left: auto; } .index_content { background-color: #1e1f1f; background-image:url('images/structure/background-2.jpg'); background-repeat: no-repeat; height: 100%; min-height: 100%; width: 100%; min-width: 1452px; border: 1px solid #505050; border-left:none; border-right:none; border-top: none; vertical-align: baseline; }

Hey All, I have two divs, one floats right and the other left, right next to each other. The one of the left has a z-index, is set to absolute positioning, and has a drop shadow on its right edge so it looks like it is over the other column. The problem is that when the left div goes longer than the right it falls out of the wrapper and past the footer. I have a br tag styled with clear both to give the wrapper its height after the two floating divs. Any help with this height problem?? Thanks in advance,