Jump to content

Search the Community

Showing results for tags 'div'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 110 results

  1. Ok- hope someone can help, as this is driving me nuts! I have 2 divs, left-floated within a wrapper div. The rigth side div is set to overflow:auto. The content correctly shows up with a scrollbar at most sizes. However, when I make the page narrower, it falls to the next line, instead of making the div narrower- why? Now, I realise I can set a min page width to stop this from happening, but right now that would have to be set at something like 1300px, which seems too wide to me for a min width. But I don't understand why the right div would fall to a new line instead of just getting narrower? Here's a link to the page if you want to try it out: http://portraits.carissalyn.com/ Here's my css: #header {height:60px;} body,html{min-width:1000px; height:100%; margin:0; padding:0; min-height:600px;overflow-y:hidden;overflow-x:auto; width: 100%; } body { font-family: Arial; background-color: #B8B8B8;}#wrapper {max-width:1200px;background-color: #B8B8B8;min-height:600px;height: 100%; color: #B8B8B8;margin-left: auto;margin-right: auto;white-space: nowrap;} #logo{float:left;color:#fff;width:200px;padding: 75px 15px 15px 0px;}#content {float: left;max-width:80%;color: #000;overflow:auto;} .table {margin:auto; padding: 10px;}.table td { padding: 5px; font-family: arial, sans-serif; text-align:center;color: #cccccc; font-size: 120%;}.table th { padding: 5px; font-family: arial, sans-serif;} and here's the html: <!DOCTYPE html><html lang="en"><head><title>Carissa Lyn Photography</title><link href="site_style.css" rel="stylesheet" type="text/css" media="screen"> </head><body><div id="header"></div><div id="wrapper"> <div id="logo"><img src="images/logo_design.png" alt="logo"></div> <div id="content"> <table class="table"> <tr> <td><img src="images/photo1.jpg" alt="portrait"></td> <td><img src="images/photo2.jpg" alt="portrait"></td><td><img src="images/photo3.jpg" alt="portrait"></td> <td><img src="images/photo4.jpg" alt="portrait"></td><td><img src="images/photo5.jpg" alt="portrait"></td> <td><img src="images/photo6.jpg" alt="portrait"></td> </tr> </table> </div> </div> </body></html>
  2. yoyo w3...ive been starting up on a project... but now the design is crap inside explore, and just finded out... this is how it SHOULD look like (notice the boxes are in the middle...): and this is how it IS looking right now.. : and that is the WRONG design.. i need the boxes to center in the middle...this is my setup skin: function stdhead($title = ""){global $MT;/*Stylesheet Mod...*/if($CURUSER){ $HWT['stylesheet'] = isset($CURUSER['stylesheet']) ? "{$CURUSER['stylesheet']}.css" : $MT['stylesheet'];}/*Stylesheet Mod...*/$HTMLOUT = "";/*Starting the variable...*/$HTMLOUT .= "<head><meta http-equiv='Content-Type' content='text/html'; charset='iso-8859-2' /><title>{$title}</title><link rel='shortcut icon' href='favicon.ico' /><link rel='stylesheet' href='styles/{$MT['stylesheet']}.css' type='text/css' /></head><body>";$HTMLOUT .= "<div id='header'>";$HTMLOUT .= "Header/Banner...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='status_bar'>";$HTMLOUT .= "Stats...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='menu'>";$HTMLOUT .= "Menu/Links...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='main_content'>";$HTMLOUT .= "Content Place...";return $HTMLOUT;}function stdfoot(){$HTMLOUT = "";/*Starting the variable...*/$HTMLOUT .= "</div>";//Ending main_content...$HTMLOUT .= "<div id='footer_bar'>";$HTMLOUT .= "MightyTracker © 2013-2014";$HTMLOUT .= "</div>";//Ending Footer...$HTMLOUT .= "</body></html>";/*Local HTML Ending...*/return $HTMLOUT;} and this is my CSS: @charset "iso-8859-2";/* CSS Document */* {margin:auto;padding:auto;font-size:8pt;}body {background-color:#151515;color:#FFF;}#header { background-color:#111111; color:#FFF; width:1000px; height:100px;/*Configure for banner place...*/ position:relative; margin:auto; padding:auto;}#status_bar { background-color:#222222; color:#CCC; width:1000px; height:auto; margin:auto; padding:auto;}#menu { background-color:#333333; color:#FFF; width:99%; margin:auto; padding:auto; height:auto;}#main_content { background-color:#444444; color:#FFF; width:99%; height:auto; margin:auto; padding:auto;}#footer_bar { background-color:#333333; color:#FFF; width:99%; height:auto; margin:auto; padding:auto;} and im not sure what i have done wrong... but i have tried almost everything i think i could come up with... so asking here now...note that i also have tried position:relative... nofthing... its like its just ignoring the damn css in the explore... ideas?...
  3. porkypie

    another div problem

    hey guys, I seem to have a few problems with my divs. I've added my .html and .css file so you can check my code. It might be a bit messy in those files so i hope it's still understandable. here are my problems. First one: there's a small white space in between the upper 2 black bars. I want this space to be as wide all the way down to the footer. Somehow it won't work and I can't figure out why. It looks like the containing div is messing it up. second problem: the small divs on the right side seem to be a few pixels too big on the right and go outside of the containing div. How can i prevent this from happening? It looks like this is also happening to the 4 bigger divs on the right but I'm not sure. Last problem: The footer is acting weird and i just can't figure out how to fix it. I'm actually thinking all these problems have a single solution to make it all work. But at the moment i am just clueless. I hope some one can help me out here.It would be very appreciated. Thanks in advance! Porkypie style3.csstest.html
  4. Hey, I've added a screenshot to make it easier to for you guys to help me. I'm not sure why this is happening because I haven't changed a thing and it was al perfectly fine before. My web developer program shows my <ul>'s -webkit-padding-start: 40px;. So I've tried to change it to 0 pixels in my CSS file but nothing won't change.Does someone have an idea how I can make the space around the <ul> go away. Thanks in advance! Greets,Porkypie
  5. Hey, I have to use HTML & CSS to make a project for school. I'm a beginner and i'm having a small problem. After a lot of searching on the internet and not finding a solution I decided it woud be best to ask for some help here. I've attached a .css and .html file to this post so you can see what i did . What I want to accomplish is 2 rows with 3 <div>'s next to eachother. Together they should have the same width as the menu and every <div> should have the same size. Also they should be underneath the grey bar and above the footer. As you can see right now there's 6 <div>'s next to each other and they're definitly not the right size. I would really appreciate it if someone could explain me how I can fix the <div>'s so i can make them look like how I want them to (preferably in baby-language). If my story isn't clear enough but you want to help me, don't hesitate to ask Thanks in advance! greets,Porkypie Style.cssTeams.html
  6. So I'm pretty new with all this and have just been learning xml, javascript, html5 and css3 over the last week or so to work on this idea. I've got a lot of the background stuff in a rough draft and set up in place, and for the most part I'm working on just displaying it all now. I have a side column (nav) which I'm using a transition to slide on and off the page, with an arrow "button" attached to do this. The arrow is an embeded SVG on a <div> tag with an absolute position to the nav column, so when the column.left property is slid off screen the arrow slides with it. The issue though is that the div tag is not firing the onclick event I have setup calling the javascript to change the .left property. Initially as I was first building it I just activated the script by clicking on the nav and it worked fine until I started implementing the arrow. I've tried a few options and I think I'm stuck. Note: the script runs fine, I can even just inject toggleNav(); and it goes back and forth perfectly. Here's the focus of the code: onclick Event <script> // Scripts for sidebarsfunction toggleNav(){var navLeft = document.getElementById("nav").style.left; if (navLeft == 0 || navLeft == "0px"){ document.getElementById("nav").style.left = "-251px"; document.getElementById("nodes").style.left = "0px";}else if (navLeft == "-251px"){ document.getElementById("nodes").style.left = "251px"; document.getElementById("nav").style.left = "0px";}}</script> Body <body><header> <h1>BibleGene</h1> <div id="bottomHeader"></div></header><section id="container"> <section id="nav"> <div id="navArr" onclick="toggleNav();"> <embed src="expandArrow.svg" type="image/svg+xml" /> </div> </section> <section id="nodes" onclick="toggleInfo()"> <p id="test"></p> </section> <section id="info" onclick="toggleInfo()"> </section></section> </body> Styles #nav {height: 100%;width: 230px;padding: 0 10px;position: absolute;z-index: 2;left: 0px; background-color: #f7f7f7;border-color: #a5a5a5;border-right-style: solid;border-width: 2px; /* Transition Effects */transition: left 0.5s;-moz-transition: left 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s; /* Safari and Chrome */-o-transition: left 0.5s; /* Opera */}#navArr {height: 20px;width: 20px;margin: 8px 0px; opacity: 0.3; position: relative;z-index: 2;left: 248px;}#navArr:hover {opacity: 1;}#nodes {height: 100%;min-width: 450px;margin: 0 10px;position: absolute;z-index: 1;left: 250px;right: 250px; /* Transition Effects */transition: left 0.5s, right 0.5s;-moz-transition: left 0.5s, right 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s, right 0.5s; /* Safari and Chrome */-o-transition: left 0.5s, right 0.5s; /* Opera */}
  7. The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}
  8. Hi. I was asked to rebuild my company's website. The company gave me access to a temporary server for me to test the website and play around with. Not all menus work but here is the front page: http://www1.ocn.ne.jp/~kvic I got it to look right on Chrome, Firefox and IE8, but not IE6 and IE9. In IE6, the three divs are pushed to the right (the right-most box is moved below the left-most box as a result).In IE9, the feature div is duplicated above itself but it's just a blank box.How do I fix this? I'm really new at this, having taught myself CSS in just 2months+ so the CSS is really messy. Now I know what real web designers face everyday. Please advise. Thank you. Edit: Also, if you find other things that should be fixed or could make the code look tidier, please point them out.
  9. Hi! I have a problem with wrapping the zeroes within the 'content' div although i am using the 'white-space' property with a 'pre-line' value . I don't know where I went wrong. Help please. >_< .content{background-color:green;width:750px;height:510;padding-left:5px;padding-right:5px;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;white-space:pre-line;color:black;} <div class="content">CONTENT0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</div> Here is the code for the whole page. <html><head><style type="text/css">a:link {text-decoration:none; color:white; } /* unvisited link */a:visited {text-decoration:none; color:white;} /* visited link */a:hover {text-decoration:underline;color:grey;} /* mouse over link */a:active {text-decoration:underline;color:black;} /* selected link */body{font-family:arial;color:white;}.container{background-color:#191919;font-family:arial;width:1000px;height:1000px;margin-left: auto ;margin-right: auto ;}.logo{background-color:grey;width:190px;padding-top:85;padding-bottom:85px;text-align:center;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;}.banner{background-color:green;width:760px;height:190px;margin-left:10px;margin-top:10px;float:left;border:5px solid gold;}.sidebar{background-color:green;width:100px;height:500;padding:45px;text-align:center;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;}.menu{background-color:red;width:760;padding-top:5;padding-bottom:5;margin-left:10px;margin-top:10px;float:left;border:5px solid gold;}.content{background-color:green;width:750px;height:510;padding-left:5px;padding-right:5px;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;white-space:pre-line;color:black;}ul.online{ word-spacing:100px;list-style-type:none;}li.inline{display:inline; }</style></head><body><div class="container"><div class ="logo">LOGO</div><div class="banner">BANNER</div><div class="sidebar">SIDEBAR</div><div class="menu"> <center><ul class="online"> <li class="inline"><a href="">Home</a></li> <li class="inline"><a href="">Log-In</a></li> </ul></center></div><div class="content">CONTENT0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</div></div></body></html>
  10. What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.Someone told me use DIV tags but how do i put this in HTML code?.
  11. Hi there, After many hours searching for the answer to what I thought was a relatively simple query, I am still no wiser. I hope an expert here will be able to help me with the following - How do you maintain the proportions of child div as its parent gets larger, when the parent is set to width:auto (to fill the browser)? For example say the parent is 1000px X 400px and its child is 200px X 100px; when the browser is resized and changes the parent to 500 x 200, what is the CSS code to ensure the child div changes size with it, proportionally, making it 100 px X 50px? This is because I have come across a JS plugin to scale the text to fit the div. Many thanks in advance, I look forward to reading the response. Matt
  12. Hello. Can anybody explain me how can I set distance between two <div> in a container? Look at the example: <div id="container"> <div id="item1"></div> <div id="item2"></div></div> I need a distance between item1 and item2. I've already played with top, bottom, margin, but nothing help me. Then how?
  13. I've been having some problems with getting what I wanted out of divs, and I am forced to come to the conclusion that CSS is broken. I've attached an HTML file to demonstrate the problems - you will need to edit its source HTML and follow the instructions to see the problems. I fully accept that *I* may be the problem rather than CSS, and at least all major browsers are suffering the same problem, but I really feel that CSS is at fault here and I was wondering what others thought? One challenge is to get a box to fit within the browser window (no scrolling required) with a 10 pixel border *all* around (no matter what size the browser window becomes), and another challenge is to get a fixed-width box to anchor itself to the right side of the browser window so that it is unaffected by scrolling (i.e., fixed positioning). In neither case are you allowed to use tables, and for the right-anchored box you're not allowed to use a fixed left position / margin (in other words, changing the width of the browser should keep the box anchored to the right). (This is not homework, BTW, I left school / college / university years ago! It's just what caused me to write this post.) css_issues.html
  14. HEllo i am working on a site, but it is not uploaded so i will only post the code here for help. It is about a big large empty space, almost twice as large as the page were all the design is, maybe it goes out of the container too but i am not sure. So what do i need to do, or to remove in css for it to be ok. I notice that when i remove the "meny"boxes "wich are located to the left) the site becomes fine, but when they are there this empty space is coming up :/. What do i need to do? There are 2 css files. The one named pse5menyset.css is the one with the menys to the left you need to look into for helping me i guess! thank you pse.css index5.html pse5menyset.css
  15. I'm having some trouble getting a form to display properly when printing. The "School of Medicine" section works fine, but section 7 (which is actually apDiv9) for SSPPS disappears when printing. I looked and it seems like it's getting shoved to the second page. Any idea how to fix that? Additionally, if there's a better way to organize the tables so that everything except the three TextAreas are on the first page (with the TextAreas on the second), I'd be happy to know about it. EDIT: Sorry, niche. Code is kind of long, so I didn't want to take up too much space. <!DOCTYPE html><html><head><title>Teaching Quantification Form</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="author" content="David" /><meta name="keywords" content="teaching, quantification, ucsd" /><!--Version 0.7--><style type="text/css">body {font-size:100%;font-size:0.75em;font-family:"Arial",Helvetica,sans-serif;}sup {font-size:75%;}table {border:1px solid black;border-collapse:collapse;width:385px;}td {border:0.5px solid black;}textarea { resize:none; overflow:hidden; width:25em; height:15em;}.lTextArea{width:50.5em;}.hiddenClass {visibility:collapse;}.showClass {visibility:visible;}.pBreak {page-break-before:always;}#apDiv1 {position: relative;width: 200px;height: 115px;z-index: 1;left: 10px;top: 10px;}#apDiv2 {position: relative;width: 200px;height: 115px;z-index: 2;left: 10px;top: -105px;}#apDiv3 {position: relative;width: 200px;height: 115px;z-index: 3;left: 10px;top: 200px;}#apDiv4 {position: relative;width: 200px;height: 115px;z-index: 4;left: 10px;top: 165px;}#apDiv5 {position: relative;width: 200px;height: 115px;z-index: 5;left: 400px;top: -450px;}#apDiv6 {position: relative;width: 200px;height: 115px;z-index: 6;left: 400px;top: -160px;}#apDiv7 {position: relative;width: 200px;height: 115px;z-index: 7;left: 10px;top: -80px;}#apDiv8 {position: relative;width: 200px;height: 115px;z-index: 8;left: 400px;top: -175px;}#apDiv9 {position: relative;width: 200px;height: 115px;z-index: 9;left: 400px;top: -290px;}#apDiv10 {position: relative;width: 200px;height: 115px;z-index: 10;left: 10px;top: -240px;}#apDiv11 {position: relative;visibility:hidden;z-index: 11;left: 10px;top: 110px;}#apDiv12 {position: relative;z-index: 12;left: 10px;top: -45px;}/*@media screen {body { background-image:url('http://videoprocessing.ucsd.edu/~stanleychan/logoUCSD.gif'); background-repeat:no-repeat; background-position:right top; background-attachment:fixed; background-size:15%;}} */@media print {sup {font-size:100%;}.noPrint { visibility:hidden;}.medSup { visibility:hidden;}#apDiv10 {position: relative;width: 200px;height: 115px;z-index: 10;left: 10px;top: 0px;}}</style><script type="text/javascript">function calculateTotal(){var total = 0;var current = 0;var elem = document.getElementsByTagName("input");for(var i = 0; i < elem.length; i++){ current = parseInt(elem[i].value); if (!isNaN(current)) { total = total + current; } current = 0;}if (!isNaN(total)){ document.getElementById("calcResult").innerHTML = total;}}function forceOther(type){if (type == "CourseNumbers"){ alert("Please complete the \"Course Numbers or Names\" section below.");}else if (type == "StudentNames"){ alert("Please complete the \"Student/Trainee Names\" section below.");}else if (type == "Other"){ alert("Please complete the \"Other Activities\" section below.");}}function reqChecker(){var x=document.forms["fForm"]["other"].value;var missingReq = false;var courses = document.getElementsByClassName("course");var students = document.getElementsByClassName("student");var temp = 0; for (var j = 0; j < courses.length; j++){ temp = parseInt(courses[j].value); if (temp != 0) { if (document.getElementById("courseNum").value == "") { missingReq = true; forceOther("CourseNumbers"); } } temp = 0;} temp = 0; for (var k = 0; k < students.length; k++){ temp = parseInt(students[k].value); if (temp != 0) { if (document.getElementById("stuName").value == "") { missingReq = true; forceOther("StudentNames"); } } temp = 0;} temp = parseInt(x); if (temp != 0){ if (document.getElementById("otherField").value == "") { missingReq = true; forceOther("Other"); }} if (!missingReq){ calculateTotal();}}function setMED(){document.getElementById("SSPPSAdministration").style.visibility = "collapse";document.getElementById("SSPPSEducation").style.visibility = "collapse";document.getElementById("MEDAdministration").style.visibility = "visible";document.getElementById("MEDEducation").style.visibility = "visible";document.getElementById("apDiv1").style.visibility = "visible";document.getElementById("apDiv2").style.visibility = "collapse";document.getElementById("apDiv8").style.visibility = "visible";document.getElementById("apDiv9").style.visibility = "collapse";}function setSSPPS(){document.getElementById("MEDAdministration").style.visibility = "collapse";document.getElementById("MEDEducation").style.visibility = "collapse";document.getElementById("SSPPSAdministration").style.visibility = "visible";document.getElementById("SSPPSEducation").style.visibility = "visible";document.getElementById("apDiv1").style.visibility = "collapse";document.getElementById("apDiv2").style.visibility = "visible";document.getElementById("apDiv8").style.visibility = "collapse";document.getElementById("apDiv9").style.visibility = "visible";}</script></head><body onload="setMED();"><p><form><b>Name: </b><input type="text"></input> <input type="text"></input> <b>Year: </b><input type="text" size="2"></input></form></p><p><input type="radio" name="radioSelector" value="MED" checked="checked" onclick="setMED();" autocomplete="off">School of Medicine</input> <input type="radio" name="radioSelector" value="SSPPS" onclick="setSSPPS();" autocomplete="off">SSPPS</input></p> <p><button type="button" class="noPrint" onclick="reqChecker();">Calculate</button> Total Credits: <span id="calcResult">0</span></p><form id="fForm" name="fForm"> <div id="apDiv1"> <Table id="MEDAdministration" class="showClass"> <caption> <b title="Sharing credit with an assoc. director is at the discretion of the course/program director.">1. Administration<sup class="noPrint">*</sup></b> </caption> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">PreClerkship Thread Director<sup class="noPrint">*</sup></td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PreClerkship Thread Director- Path/Hist, Anatomy, Pharmacology</td> <td>480 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PreClerkship Block Director and Lead Clinical Educator</td> <td>3 Credits/Contact Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">Core Clerkship Director<sup class="noPrint">*</sup></td> <td>480 Credits/Clerkship</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Clinical Foundations Director</td> <td>480 Credits/Clerkship</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">Graduate Program Director<sup class="noPrint">*</sup></td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">4<sup>th</sup> Year Clerkship Director<sup class="noPrint">*</sup></td> <td>5 Credits/Month</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">Residency Program Director<sup class="noPrint">*</sup></td> <td class="creditAmount">20 Credits/Resident/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Credit will be pro-rated over the duration of the grant.">PI- Training Grant<sup class="noPrint">*</sup></td> <td>50 Credits/Grant</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Course Director (CE/CME)</td> <td>2 Credits/Hour CE/CME Credit</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Academic Community Director</td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="For students in graduate programs, only 1st year students are counted.">Student Advising (formal only)<sup class="noPrint">*</sup></td> <td>5 Credits/Student/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Graduate Course Initial Composition/Set-up (1 time only)</td> <td>10 Credits/Course</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Graduate Course Administrative Time</td> <td>10 Credits/Course</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> </Table></div> <div id="apDiv2"> <Table id="SSPPSAdministration" class="hiddenClass"> <caption> <b title="Sharing credit with an assoc. director is at the discretion of the course/program director.">1. Administration<sup class="noPrint">*</sup></b> </caption> <tr> <td>Preclinical Core Course Director</td> <td>1 Credit/Course Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Preclinical Core Course Section Leader</td> <td>1 Credit/Course Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Core Clerkships are Free Clinic (IPPE), Hospital Practice (IPPE), SPPS 400A/B, SPPS 401 A/B & APPE Community Pharmacy.">Core Clerkship Director<sup class="noPrint">*</sup></td> <td>150 Credits/Clerkship</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Site Director includes VA, Orange County, Hillcrest, Rady.">Clerkship Site Director<sup class="noPrint">*</sup></td> <td>100 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Graduate Program Director includes BMS porgrams and Experiential Education Programs.">Graduate Program Director<sup class="noPrint">*</sup></td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>4<sup>th</sup> Year Clerkship Director</td> <td>5 Credits/Month</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Residency or Fellowship Program Director</td> <td>20 Credits/Trainee/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PI- Training Grant</td> <td>50 Credits/Grant</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>CE Course Director</td> <td>2 Credits/Hour CE Credit</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="For students in graduate programs, only 1st year students are counted. For pharmacy & medicine students, 1st - 4th year and resident advisees are counted.">Trainee Advising (formal advising only)<sup class="noPrint">*</sup></td> <td>5 Credits/Trainee/Year</td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td title="Includes serving as a formal Advisor for or Liason to student groups such as Operation Immunization, APhA-ASP, etc.">Outreach/Professional Project Advising<sup class="noPrint">*</sup></td> <td>10 Credits/Project Group</td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Graduate Course Initial Composition/Set-up (1 time only)</td> <td>10 Credits/Course</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Graduate Course Administrative Time</td> <td>10 Credits/Course Hour</td> <td><input class="course" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv3"> <Table class="GraduateTable"> <caption> <b>2. Graduate Courses and Programs</b> </caption> <tr> <td>Graduate Student Training</td> <td title="(SoM)Combined Graduate Student and Post-Doctoral Fellow training will be capped at 5 Credits/Week. (SSPPS)This includes laboratory rotation students and full-time Summer Research Project students.">1 Credit/Trainee/Week<sup class="noPrint">*</sup></td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Post-Doc Research Fellow/Resident Training</td> <td title="(SoM)Combined Graduate Student and Post-Doctoral Fellow training will be capped at 5 Credits/Week.">0.5 Credits/Trainee/Week<sup class="noPrint">*</sup></td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv4"> <Table class="PreClinicalTable"> <caption> <b>3. Preclinical Electives Course</b> </caption> <tr> <td>Initial Development/Set-up (one time only)</td> <td>10 Credits/Course</td> <td><input class="course" type="text" value=0 size="3"autocomplete="off"/></td> </tr> <tr> <td>Administrative Time</td> <td>10 Credits/Course</td> <td><input class="course" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Independent Study Electives</td> <td>10 Credits/Course</td> <td><input class="course" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv5"> <Table class="ClassroomTable"> <caption> <b>5. Classroom Teaching</b> </caption> <tr> <td><i>Lectures</i></td> <td></td> <td></td> </tr> <tr> <td> Core Medical School and SSPPS Courses</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> GME and other Graduate Courses</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Core Lecture series for GME</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Grand Rounds</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Electives</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Seminars</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Resident Report</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> PBL Facilitation</td> <td>3 Credits/Contact Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> POM Facilitation</td> <td>3 Credits/Contact Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Small Group, Laboratories and/or Workshops</td> <td>2 Credits/Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Other</td> <td>2 Credits/Teaching Hour</td> <td><input name="other" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv6"> <Table class="ClinicalTable"> <caption> <b title="(SoM)Trainee is a Medical Student, Resident, Fellow, Graduate Student, or Post-Doctoral Fellow. (SSPPS)Trainee is a Pharmacy or Medical Student, Resident, Fellow, Graduate STudent, or Post-Doctoral Fellow.">6. Clinical Teaching (when trainees are present)- max 260 per year<sup class="noPrint">*</sup></b> </caption> <tr> <td>Inpatient or General Ward Attending</td> <td>15 Credits/Week</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Consult Attending</td> <td>10 Credits/Week</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Path., Rad., ED, Anesthesia Attending</td> <td>1 Credit/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Operating Room/Clinic Attending</td> <td>1 Credit/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td></tr> <tr> <td>Medical Student Ambulatory, Clerkships, Outreach Events Precepting</td> <td>2 Credits/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td></tr> <tr> <td>CPX Remediation Training</td> <td>1 Credit/Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr><tr> <td>OSCE, Oral, or Practical Exam Participation</td> <td>3 Credit/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> </Table> </div> <div id="apDiv7"> <Table class="AcademicTable"> <caption> <b>4. Academic Committees</b> </caption> <tr> <td>ISP Chair/Primary Mentor</td> <td>20 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Includes Secondary Project Advisors/mentors for Student, Resident, & Fellow Research Projects.">ISP Committee Member/Secondary Advisor<sup class="noPrint">*</sup></td> <td>5 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PH. D. Committee Member</td> <td>12 Credits/Student/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Minor Proposition Chair</td> <td>20 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Minor Proposition Member</td> <td>5 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> </Table> </div> <div id="apDiv8"> <Table id="MEDEducation" class="showClass"> <caption> <b>7. Education Committee Service (credit commensurate with attendance)</b> </caption> <tr> <td>Chair: CEP, CCC, EC, GMEC, GPEC</td> <td>1 Credit/Meeting Hour (Max: 96 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Member: CCC, EC, GMEC, GPEC</td> <td>1 Credit/Meeting Hour (Max: 45 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Member: CEP</td> <td>1 Credit/Meeting Hour (Max: 20 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv9"> <Table id="SSPPSEducation" class="hiddenClass"> <caption> <b>7. Education Committee Service (credit commensurate with attendance)</b> </caption><tr> <td>Chair: CEP, CCC, EC, GMEC, GPEC, EPAOC/Faculty, Comp Exam, RAC, Research Coucil</td> <td>1 Credit/Meeting Hour (Max: 96 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td></tr><tr> <td>Member: CEP, CCC, EC, GMEC, GPEC, EPAOC/Faculty, Comp Exam, RAC, Research Coucil</td> <td>1 Credit/Meeting Hour (Max: 45 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td></tr> </Table> </div></form><form id="otherForm"><div id="apDiv10"><Table class="secTable" border="1" style="table-layout:auto"> <tr> <th>Course Numbers or Names</th> <th>Student/Trainee Names</th> </tr> <tr> <td><textarea name="textarea" value="" autocomplete="off" id="courseNum"></textarea></td> <td><textarea name="textarea" value="" autocomplete="off" id="stuName"></textarea></td> </tr></table><table class="thirdTable" border="1" style="table-layout:auto "> <tr> <th class="lTextArea">Other Activities</th> </tr> <tr> <td><textarea name="textarea" value="" class="lTextArea" autocomplete="off" id="otherField"></textarea></td></table></div></form></body> tempTeaching.html
  16. Hi,Am having a little trouble creating 2 divs so they are side by side inside a container with set width. The HTML looks like this:<div id="contenttop"></div><div id="contentmiddle"><div class="set-size"><div class="column-580 float-left">sfhsfhs</div><div class="column-400 float-right">sfhsfh</div></div></div><div id="contentbottom"></div> and the CSS is as follows/*<-- column system settings -->*/.set-size {width:980px;margin:0 auto;}.column-580 {width:580px;}.column-400 {width:400px;}/*<-- content -->*/#contenttop { background: url(../images/content_top.png) no-repeat; width: 980px; height: 30px; margin-top:9px;}#contentmiddle { background: url(../images/content_middle.png) repeat-y;}#contentbottom { background: url(../images/content_bottom.png) no-repeat; width:980px; height:30px;} however for some reason the divs dont seem to go side by side, but undernaeah each other. Basically, i want to have one div on the left hand side with some content (the 580px size div) and the other div with content on the right hand side (the 400px size div) Have inserted a picture of how it looks within dreamweaver and you can see the divs are not side-by-side, but go underneath each other. Any help would be greatly appreciated. Regards,James
  17. Bilal AK

    HTML layout

    hy to aaaaavery one out there, help!!!! :Shock:I have been learning HTML on this site for over almost three-four weeks I am in HTML basics..at HTML layout,so aaplease can somebody tell me what is this: id=" " attribute it's value it's use in layout and beside that.and these <div> and <span> &<div id="container" (<<<<<<<<what's this) style="width:500px"> (a line from the example given in HTML layout)
  18. I have designed a template in dreamweaver.Problem is that my links do not link when placed within the div "container".I can only get the links to work when the ap div that they reside inside is placed outside the "container" but then they don't scale with the page.Any advice would be appreciated. Thanks.
  19. Hello there, I have developed this piece of php/html code, for my custom Wordpress theme. <?php get_header(); ?><div class="layout clearfix"> <div id="content"> <?php if (have_posts()) : ?> <div id="loops-wrapper" class="left"> <?php while (have_posts()) : the_post(); ?> <div id="article-<?php the_id(); ?>" class="article clearfix"> <div class="post-others-wrap"> <p class="categories"><?php the_category('<br />'); ?></p> <div class="khmedia-social"> <p class='st_facebook_vcount' displayText='Facebook'></p> <p class='st_twitter_vcount' displayText='Tweet'></p> <p class='st_email_vcount' displayText='Email'></p> </div> </div> <div class="post-date-wrap"> <p class="post-date"> <span class="day"><?php the_time('d'); ?></span> <span class="month"><?php the_time('M'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </p> </div> <div id="article-title-<?php the_id(); ?>" class="post-title"> <h1> <?php echo the_title(); ?> </h1> <div id="article-excerpt-<?php the_id(); ?>" class="post-content"> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> </div> </div> </div> <?php endwhile; ?> <div id="pagelinks" class="clearfix"> <?php previous_post_link('<div class="prevlink">%link</div>'); ?> <?php next_post_link('<div class="nextlink">%link</div>'); ?> </div> </div> <?php endif; ?> </div> <div class="sidebar"> <?php if ( is_active_sidebar( 'primary' ) ) : dynamic_sidebar( 'primary' ); endif; ?> </div></div><?php get_footer(); ?> And now here is the CSS for it: .layout { display: block; margin-top: 3em; width: 100%;} #content { line-height: 1.5em; width: 697px; float: left; padding-right: 30px; position: relative; min-height: 300px;} .clearfix { clear: both; content: " "; display: block; line-height: 0; visibility: inherit;} #loops-wrapper { display: block;} #loops-wrapper .article { padding-left: 122px; width: 600px; margin-bottom: 50px; min-height: 150px; display: block; position: relative;} #loops-wrapper .article .post-others-wrap { left: 0; display: block; position: absolute; width: 100px; margin: 55px 0 0; text-align: right; line-height: 1.5em;} #loops-wrapper .article .post-others-wrap .khmedia-social { display: block; border-top: 2px solid #8AE234; border-bottom: 2px solid #8ae234; padding: 0 0 5px; margin-top: 20px;} #loops-wrapper .article .post-others-wrap .categories { color: black; position: relative;} Actually, the main content area is expanding with large data. But, when I insert a simple post with only the title. The div is overlapping with the footer.Here is my site link: http://www.khmedia.in Please help guys...
  20. Okay im having this problem on my footer that it wont stick bottom of the div element. So im having code like above. So in style css i have tried everything in footer footer {bottom:0px; <-- Doesnt workmargin-bottom:0px; <-- Doesnt work}<div><footer>Copyright YEAR ...</footer></div>
  21. azzam22

    css "div".

    hi everyone i'm a new member and i'm learning css and I didn't understand how to make a layout with "div"
  22. Hello Everyone, Could you please tell me how do I fix Scrolling Action in “A Segment”? Please help. Thank you.
  23. Ok so I made a little scrolly box thing for my stories on my websites little html slide show thingy with all the link buttons right. Well on the first slide it worked, but on the 2nd, the scroll box wouldn't show up. I tried it again with the 3rd. Same thing, yet the first one shows up, and the page is perfect. Help please. Ill post the code. <html> <head> <title> Picture Five </title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <table class="SS"> <tr> <td class="navigation"> <p id="text"> Slide Show Navigation:</p> <p><a href="SSPicturefour.htm" alt="Back"> <img border="0" src="backward.png" alt="back" width="32" height="32" /> </a> <a href="SSInstructions.htm" alt="Restart"> <img border="0" src="restart.png" alt="Restart"> </a> <a href="SSPicturesix.htm" alt="Next"> <img border="0" src="forward.png" alt="next" width="32" height="32" /></a> </p><hr/> </td> </tr> <tr> <td class="picture"> <h1>Old</h1> <hr/> <img src="old.png" width="10%" height="20%> </td> </tr> <tr> <td> <div id="scroll"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis blandit mattis. Maecenas vel tortor sed nisl blandit sollicitudin ut ut nunc. Quisque elementum cursus urna. Suspendisse porttitor mattis metus, eget consequat urna congue id. Aenean at tempor sapien. Sed sollicitudin enim sagittis tellus tincidunt tempor. Quisque nec eros mi, a sodales tellus. Nunc condimentum, ligula sed porttitor lacinia, quam justo interdum est, aliquam varius dui tellus pellentesque sapien. Integer in dui risus. Duis hendrerit libero in dui scelerisque ut consequat velit laoreet. Pellentesque nec urna nisl, eleifend ullamcorper libero. Phasellus ligula dolor, interdum varius imperdiet nec, consequat aliquam orci. Donec tempor tempor elit, vel pretium neque aliquam sed. Vivamus ut elementum nulla. Praesent sollicitudin ultrices leo, consequat sagittis justo egestas sed. Donec eu leo risus, id sollicitudin risus. Suspendisse augue mi, ornare sit amet sollicitudin non, malesuada non urna. Maecenas pulvinar dignissim diam, ac fringilla leo commodo ut. Donec viverra sodales mauris at mollis. Integer et quam mollis nisi hendrerit venenatis quis et arcu. Morbi sollicitudin congue enim in facilisis. Cras id pharetra ligula. Vivamus sed ipsum a quam feugiat auctor at eu erat. Ut tempor consequat enim in tincidunt. Nulla massa ipsum, rhoncus id malesuada ac, pulvinar ut massa. Suspendisse ac ante ut ante fermentum vestibulum. Cras sed mauris in sem hendrerit ultricies in at massa. In vestibulum vestibulum turpis ut aliquet. Integer facilisis ullamcorper ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc in sapien et felis luctus vulputate. Cras aliquet metus ac magna imperdiet pellentesque. Curabitur sed turpis ac nisi porta fringilla in non ligula. Mauris id dolor eget velit adipiscing scelerisque vitae nec nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Sed at magna et nisi vestibulum mollis id a nibh. Aenean sollicitudin vestibulum diam, nec faucibus lorem tempor non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pellentesque ipsum venenatis malesuada. Suspendisse ullamcorper, enim eget sollicitudin dictum, ante odio commodo odio, vitae aliquet est mi imperdiet enim. Sed nec massa a turpis adipiscing adipiscing. In hac habitasse platea dictumst. Nunc vitae magna tellus, sit amet vehicula orci. Duis ac sagittis tortor. Vestibulum ac tortor a velit tristique porta. Vivamus eu auctor nisi. Fusce sodales, eros non pharetra fringilla, risus neque imperdiet nulla, quis consectetur orci nisl at nisl. Maecenas augue est, porttitor vel tristique non, tincidunt ut nunc. Donec tincidunt odio in sapien euismod suscipit. Sed dictum dictum vulputate. Morbi a molestie nulla. Nunc venenatis rhoncus dolor ac faucibus. Donec tincidunt fermentum tortor, et eleifend sapien accumsan eu. </p> </div> </td> </tr> </body></html> Style Sheet- a:link {text-decoration:none;} a:visited {text-decoration:none;} body {background-image:url('background.png');} table{border-color:white; width:80%; height:100%; background-color:black;} table, tr, td{ border-collapse:collapse; color:grey;} h1 {text-align:center; color:#800000 ;} h2{text-align:center; color:#A00000;} h3{text-align:center; color:#E00000;} p{font-family: courier new; color:white;text-align:center; font-size:20px;} div{background-color:black;} p.story{font-family:arial; font-size:14px; text-indent:50px;text-align:left;} ul.a {list-style-type:circle;} div.scroll{width:100%; height:20%; overflow:scroll;} iframe#bg{background-color:black;}#text{color:grey; font-family:georgia; font-size:14px; text-align:center;} #title{border-color:white; height:1%;} #nav1{width:5%; height:70%;} td.navigation{border-color:white; width:100%; height:1%;} td.picture{ width:885px; height:1%;} table.SS{width:100%;height:100%;} table.ssp{width:10%;}
  24. I'm trying to have a centered <div> that always goes top to bottom, but as content is added it expands with the content. Thanks! Here's what I have so far. <!DOCTYPE HTML><html><head><title>My Site</title><style type="text/css">* {padding: 0;margin: 0;}html, body {height: 100%;}body {background-color: #999;}.container {position: relative;width: 1000px;height: 100%;margin-left: auto;margin-right: auto;background-color: #fff;}</style></head><body><div class="container"><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1><h1>TESTING</h1></div></body></html>
  25. Okay, here is the problem, the background to it is a little bit lengthy but please bear with me as I think it's probably essential to getting to the root of it. I'm trying to design an on-site navigation system using straight javascript and jquery. The site is for a photographer who has a number of galleries of her images she wants to put up. These are displayed on the page as a series of thumbnails which are arranged in a grid (lets say 3 by 3 here for simplicity's sake). The idea is that these can either be displayed in order of size or in order of the date the gallery was updated. There are two buttons at the top of the page 'size' and 'date' and whenh one of these is clicked the thumbnails should animate into the new position. I've reduced the arrays to their essential parts for the purposes of this question. They're defined in the header of the page as follows: //order: id, gallery size, gallery date (UK format), thumbnail url. x position (px), y position (px) var galDate = new Array();galDate[0] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galDate[1] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; galDate[2] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galDate[3] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galDate[4] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galDate[5] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galDate[6] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galDate[7] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galDate[8] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; var galSize = new Array();galSize[0] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galSize[1] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galSize[2] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galSize[3] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galSize[4] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; galSize[5] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galSize[6] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galSize[7] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galSize[8] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; Displaying the thumbnails and the animation is handled by three functions: which are defined in the <head> section of the page as follows: 'Swap' loops through the all the rows in array 1 defining the id, x position and y position as variables id1, x1 and y1 (please forgive the 'document writes' this was part of an earlier debugging attempt) function swap(array1, array2){for(i=0; i<array1.length; i++){var id1 = array1[0];document.write ('id1: ' + id1);document.write ('<br />');var x1 = array1[3];document.write ('x1: ' + x1);document.write ('<br />');var y1 = array1[4];document.write ('y1: ' + y1);document.write ('<br />'); // For each row in the first array, 'Swap' then loops through the second array. When the ids are equal, this triggers the 'animate' function, which then should handle the actual animation for(j=0; j<array2.length; j++){var id2 = array2[j][0];document.write ('id2: ' + id2 );document.write ('<br />');var x2 = array2[j][3];document.write ('x2: ' + x2 );document.write ('<br />');var y2 = array2[j][4];document.write ('y2: ' + y2 );document.write ('<br />'); if (id2==id1){animate(x2, y2);} //close if else {document.write('for loop i should continue');document.write ('<br />'); } } //close for j } // close for i } // close function // 'Animate' is triggered when the ids from each of the arrays correspond and performs the animation (nb – this isn't working perfectly at the moment but the basic animation functionality is working – getting the right thumbnals to animate to the right places is something I have to come back to but its not the main problem at the moment). function animate(x2, y2){$("#"+i).animate({left:x2, top:y2},"slow");document.write ('animate function triggered');document.write ('<br />');} // The actual displaying of the thumbnails is handled by a third function called, surprisingly, 'display' which is as follows. function display (array) {for (i=0, max = array.length; i<max; i++){ $('#container').append('<div id="'+array[0]+'" style="position: absolute; left:'+array[6]+'px; top: '+array[7]+'px;"><a href="#"><img src='+array[5]+' height=75px width=75px></a></div>');}} I have all of the above in the this order in the header of the page. Finally, I have the jquery click function call which is as follows: $(document).ready(function() {$('#size').click(function() {swap (galSize, galDate);}); $('#date').click(function() {swap (galDate, galSize);}); display(galDate); }); The body of the page is as follows: <body><button id="size">Size</button> <button id="date">Date</button><div id="container"></div><script>display (galDate);</script></body> Just to be clear, I realise that some of the actual functionality isn't going to churn out the desired result in terms of positioning etc. The fact of the matter though is that the 'swap' function works in as far as it animates the images (I know because I've tested it!) :-) The problem I have (and thanks to those who've stayed with me thus far!) is that as soon as I click on one of the buttons (size or date) the displayed thumbnails disappear. The swap function is still working because all the 'document writes' display on the page and, similarly the animate function is triggered as well. Its just thet there are no thumbnails anymore and they're sort of central to the whole undertaking. As you can probably tell, I'm pretty new to this and there is no doubt an obvious explanation. The thing is, I don;t know what it is. Any ideas or nods in the right direction would be much appreciated. CheersStef
×
×
  • Create New...