Jquery Dialog Too Big? -
the jquery dialog box ridiculously huge , i'm not sure why. manually setting css not appear work either. click 'sign-in' button see dialog box.
here site i'm working on.
http://crowdfundersecrets.com/wwwteamcrowd/www/index.php
for reference later code change here code.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>teamcrowdfund</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!--[if lt ie 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> <link rel="stylesheet" href="fontkit/stylesheet.css" type="text/css" /> <script type="text/javascript" src="js/html5.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <!--accordion --> <script type="text/javascript" src="accordion/javascript.js"> </script> <link href="accordion/format.css" rel="stylesheet" type="text/css" /> <!--accordion --> <!--tab --> <link href="css/tab-style.css" rel="stylesheet" type="text/css" /> <!-- custom css --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script> //hide other modules. $(document).ready(function() { $("#signindialog").dialog({ autoopen: false, width:400, height:200, maxheight:200, modal:true, position: {my:"center", at: "center", of: window}, resizable: false, show: { effect: "blind", duration: 500 }, hide: { effect: "explode", duration: 500 }, buttons: [{ text: "sign in", click: function() { $( ).dialog( "close" ); } }] }); $('#signin').click(function(){ $('#signindialog').dialog('open'); console.log('opening sign in dialog'); }); $(".module").each(function( index ) { if(!$(this).hasclass('visible')){ $(this).hide(); } }); $(".leftnav").click(function(){ $(".leftnav").each(function(index){ //set every nav item not have current class $(this).removeclass('current'); }); $(this).addclass('current'); //because modules go in sequential order, can use number determine which. var number = $(this).attr('number'); var = 0; $(".module").each(function( index ) { i=i+1; if(i==number){ $(".module").each(function( index ) { $(this).hide(); }); $(this).show('slow'); } }); }); //default action jquery(".tab_content").hide(); //hide content jquery("ul.tabs li:first").addclass("active").show(); //activate first tab jquery(".tab_content:first").show(); //show first tab content //on click event jquery("ul.tabs li").click(function() { jquery("ul.tabs li").removeclass("active"); //remove "active" class jquery(this).addclass("active"); //add "active" class selected tab jquery(".tab_content").hide(); //hide tab content var activetab = jquery(this).find("a").attr("href"); //find rel attribute value identify active tab + content jquery(activetab).fadein(); //fade in active content return false; }); }); </script> </head> <body> <div id="signindialog" title="login" style="height:200px"> <div>username:<input type="text" value="" id="usernamelogin"/></div> <div>password:<input type="password" value="" id="passwordlogin"/></div> </div> <section class="centcoll"> <!--header --> <header> <div class="headermain"> <h1 class="logo"> <a href="index.php"><img src="images/tcf-logo.png" alt=""></a> </h1> <div class="insdietip"> <a href="insidertips.html" class="orange btnsmall"><span class="tips">insider tips</span></a> <span> <a href="#" id="register">register</a> | <a href="#" id="signin">sign in</a></span> </div> <nav class="topnav"> <a href="index.php" class="text16">our system</a> <a href="crowdfunding-news.php" class="text16">crowdfunding news</a> <a href="services.php">services</a> <a href="community.php">community</a> <a href="company.php">company</a> </nav> </div> </header> <!--header --> please me figure out why? i'm not sure causing issue. i've got work on other sites (dnfinder.com, not 1 reason).
there's lot going on there, if remove
content: "." from jquery-ui.css (line 12)
.ui-helper-clearfix:after and specify height in second div on page rather auto
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" style="width: 400px; top: 0px; display: block; height: 400px; left: 507.5px;" tabindex="-1" things start bit more normal - gives somewhere start analysis from....
Comments
Post a Comment