Search Results

Search found 9661 results on 387 pages for 'div'.

Page 17/387 | < Previous Page | 13 14 15 16 17 18 19 20 21 22 23 24  | Next Page >

  • align to the bottom of the div [closed]

    - by dole
    I need to arange the value and the lorem ipsum text to the bottom of the div as in the following image, but everything I've tryed until now doesn't work. My html looks like this: <div class="product"> <span class="title">Lorem Ipsum</span> <div class="values"> <span class="price">$29,225</span> <span class="description">Lorem ipsum dolor sit amet, consectetur ...</span> </div> </div>

    Read the article

  • Changing the innerHTML of elements in a nested div tag..

    - by PoorCoder
    -- Representative code only - I need to know how to change the innerhtml of the tablerow -- <html> <head> <script> //full javascript declaration - function call after page loads.. function () { document.getElementById('tr1').innerHTML='<td>Test</td>'; // does not work.. document.getElementByTagNames('tr')[0].innerHTML='<td>Test</td>'; // does not work.. document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work.. document.getElementById('div1').div2.tr1.innerHTML='<td>Test</td>'; //nope } </script> </head> <body> <div id='div1'> <div id='div2'> <table> <tr id='tr1'></tr> </table> </div> </div> </body> </html> Thanks for the help

    Read the article

  • XSL apply templates not working...could be XPath error

    - by AdRock
    I have converted mny stylesheet to use apply templates instead of call templates and it worked fine for my other styesheet, which was more complicated, but this one doesn't seem to work even thought it is a much simpler template. All that it outputs is the sex node and the userlevel node. I think it has to do with my Xpath. All i want is to output the < user information, nothing else <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template name="hoo" match="/"> <html> <head> <title>Registered Members</title> <link rel="stylesheet" type="text/css" href="user.css" /> </head> <body> <h1>Registered Members</h1> <xsl:for-each select="folktask/member/user"> <div class="userdiv"> <xsl:apply-templates/> </div> </xsl:for-each> </body> </html> </xsl:template> <xsl:template match="folktask/member/user"> <xsl:apply-templates select="@id"/> <xsl:apply-templates select="personal/name"/> <xsl:apply-templates select="personal/address1"/> <xsl:apply-templates select="personal/city"/> <xsl:apply-templates select="personal/county"/> <xsl:apply-templates select="personal/postcode"/> <xsl:apply-templates select="personal/telephone"/> <xsl:apply-templates select="personal/mobile"/> <xsl:apply-templates select="personal/email"/> <xsl:apply-templates select="personal"/> <xsl:apply-templates select="account/username"/> <xsl:apply-templates select="account"/> </xsl:template> <xsl:template match="@id"> <div class="heading bold"><h2>USER ID: <xsl:value-of select="." /></h2></div> </xsl:template> <xsl:template match="personal/name"> <div class="small bold">NAME:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="personal/address1"> <div class="small bold">ADDRESS:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="personal/city"> <div class="small bold">CITY:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="personal/county"> <div class="small bold">COUNTY:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="personal/postcode"> <div class="small bold">POSTCODE:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="personal/telephone"> <div class="small bold">TELEPHONE:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="personal/mobile"> <div class="small bold">MOBILE:</div> <div class="large"><xsl:value-of select="." /> </div> </xsl:template> <xsl:template match="personal/email"> <div class="small bold">EMAIL:</div> <div class="large"> <xsl:element name="a"> <xsl:attribute name="href"> <xsl:text>mailto:</xsl:text> <xsl:value-of select="." /> </xsl:attribute> <xsl:value-of select="." /> </xsl:element> </div> </xsl:template> <xsl:template match="personal"> <div class="small bold">SEX:</div> <div class="colored bold"> <xsl:choose> <xsl:when test="sex='Male'"> <div class="sex male"><xsl:value-of select="sex/."/></div> </xsl:when> <xsl:otherwise> <div class="sex female"><xsl:value-of select="sex/."/></div> </xsl:otherwise> </xsl:choose> </div> </xsl:template> <xsl:template match="account/username"> <div class="small bold">USERNAME:</div> <div class="large"><xsl:value-of select="." /></div> </xsl:template> <xsl:template match="account"> <div class="small bold">ACCOUNT TYPE:</div> <div class="colored "> <xsl:choose> <xsl:when test="userlevel='1'"> <div class="nml bold">Normal User</div> </xsl:when> <xsl:when test="userlevel='2'"> <div class="vol bold">Volunteer</div> </xsl:when> <xsl:when test="userlevel='3'"> <div class="org bold">Organiser</div> </xsl:when> <xsl:otherwise> <div class="name adm bold">Administrator</div> </xsl:otherwise> </xsl:choose> </div> </xsl:template> </xsl:stylesheet> and some of my xml <?xml version="1.0" encoding="ISO-8859-1" ?> <?xml-stylesheet type="text/xsl" href="users.xsl"?> <folktask xmlns:xs="http://www.w3.org/2001/XMLSchema-instance" xs:noNamespaceSchemaLocation="folktask.xsd"> <member> <user id="1"> <personal> <name>Abbie Hunt</name> <sex>Female</sex> <address1>108 Access Road</address1> <address2></address2> <city>Wells</city> <county>Somerset</county> <postcode>BA5 8GH</postcode> <telephone>01528927616</telephone> <mobile>07085252492</mobile> <email>[email protected]</email> </personal> <account> <username>AdRock</username> <password>269eb625e2f0cf6fae9a29434c12a89f</password> <userlevel>4</userlevel> <signupdate>2010-03-26T09:23:50</signupdate> </account> </user> <volunteer id="1"> <roles></roles> <region>South West</region> </volunteer> </member> <member> <user id="2"> <personal> <name>Aidan Harris</name> <sex>Male</sex> <address1>103 Aiken Street</address1> <address2></address2> <city>Chichester</city> <county>Sussex</county> <postcode>PO19 4DS</postcode> <telephone>01905149894</telephone> <mobile>07784467941</mobile> <email>[email protected]</email> </personal> <account> <username>AmbientExpert</username> <password>8e64214160e9dd14ae2a6d9f700004a6</password> <userlevel>2</userlevel> <signupdate>2010-03-26T09:23:50</signupdate> </account> </user> <volunteer id="2"> <roles>Van Driver,gas Fitter</roles> <region>South Central</region> </volunteer> </member> </folktask>

    Read the article

  • CSS class not having an effect on a div

    - by ETFairfax
    Hi Peeps, The following is an section of my css file plus some HTML. Can anyone tell me when I put class="containerHeader selected" (as is on Test Header A) the background colour is not being set to Red??? Cheers, ET Fairfax. div#builderContainer { margin-top: 15px; width: 390px; height: 700px; border: solid 0px #CCCCCC; background-repeat: no-repeat; } div#builderContainer .container { display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* Corner radius */ border: solid 1px #999999; } div#builderContainer .container div:hover { background-color: #EEEEEE; } div#builderContainer .containerHeader { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #93c3cd url(images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat; border-bottom: solid 0px #999999; margin: 0px; margin-top: 25px; padding: 10px; /* display: none; */ border: solid 1px #999999; font-weight: bold; font-family: Verdana; background-color: #FFF; cursor: pointer; vertical-align: middle; } div#builderContainer .containerHeader:hover { background: #ccd232 url(images/ui-bg_diagonals-small_75_ccd232_40x40.png) 50% 50% repeat; } div#builderContainer .containerHeader:active { background: #db4865 url(images/ui-bg_diagonals-small_40_db4865_40x40.png) 50% 50% repeat; } div#builderContainer .containerHeader .selected { background-color: Red; } <div id="builderContainer"> <div class="containerHeader selected" id="CHA">Test Header A</div> <div class="container" id="CA"></div> <div class="containerHeader" id="CHB">Test Header B</div> <div class="container" id="CB"></div> </div>

    Read the article

  • Show and hide divs at a specific time interval using jQuery

    - by Webrsk
    I would like to show divs at a specific interval (10 seconds) and show next div and as go on and repeat the same. ** Sequence : ** On 10th second show div1 , hide other divs , After 5seconds interval Show div 2 and hide other divs, After 5 seconds interval Show div 3 and hide other divs, and repeat the same for every 10 seconds. Code Follows: <div id='div1' style="display:none;"> <!-- content --> </div> <div id='div2' style="display:none;"> <!-- content --> </div> <div id='div3' style="display:none;"> <!-- content --> </div>

    Read the article

  • How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS e

    - by janoChen
    I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space. The one on the right side is the navigation and I want it to to fill the remaining space on it right side: My CSS: #search { width: 160px; height: 25px; float: left; background-color: #FFF; } #navigation { width: 780 float: left; /*background-color: url('../images/transparent.png') ;*/ background-color: #A53030; } My Html: <div id="search"> </div> <?php include("navigation.html"); ?> <div id="left-column"> Thank in advance!

    Read the article

  • Make overflow hidden when shrinking div

    - by johnnietheblack
    I have a div with an image in it, and the image is too large for the div. I have solved the overflow problem with the obvious CSS overflow:hidden trick. But, the problem is that when the div's parent resizes (shrinks), the div holding the image won't shrink because of the image in it. Is there a way to have a resizable div with an image in it (almost like a background image) that overflows? MY DIV STRUCTURE: <div id="parent"> <div id="image_holder"> <!-- this image will inevitably be larger than its parent div --> <img src="too_big_for_div.jpg" /> </div> </div> MY CSS: #parent { width:100%;} #image_holder { width:100%; overflow:hidden;} The #image_holder div will not resize to a smaller dimension now. Any ideas?

    Read the article

  • Jquery Accordion and Fading

    - by Slick Willis
    I am trying to create a jquery accordion that fades the header of the accordion out when the page is loaded then fades it in when the mouse hovers. The accordion also opens when the mouse hovers. I am able to get all of this working, the problem I am having is when the accordion opens the header moves away and the mouse is no longer on it to keep it lit. I would like the links to keep the header lit as well as if the mouse is on the header itself. Below is the code that I wrote for it. <html> <head <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script> </head> <body bgcolor="black"> <style = "css/text"> .links { font-family: "Georgia", "Verdana", serif; line-height: 30px; margin-left: 20px; margin-top: 5px; } .Title { font-family: "Geneva", "Verdana", serif; font-weight: bold; font-size: 2em; text-align: left; font-variant: small-caps; border-bottom: solid 2px #25FF00; padding-bottom:5px; margin-bottom: 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".Title").fadeTo(1,0.25); $(".Title").hover(function () { $(this).stop().fadeTo(250,1) .closest(".Title").find(".links").fadeTo(250,0.75); }, function() { $(this).stop().fadeTo(250,0.25); }); }); $(function() { $("#accordion").accordion({ event: "mouseover" }); }); </script> <p>&nbsp</p> <div id="accordion"> <div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Reference</a></div> <div class="links"> <a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Jquery Documentation/Help</a><br> <a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Stack Overflow</a><br> <a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">w3schools.com</a><br> </div> <div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Gaming</a></div> <div class="links"> <a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Jquery Documentation/Help</a><br> <a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Stack Overflow</a><br> <a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">w3schools.com</a><br></div> <div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div> <div class="links"> <a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br> <a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br> <a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br> </div> <div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Drinks</a></div> <div class="links"> <a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #F9FF00;">Jquery Documentation/Help</a><br> <a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Stack Overflow</a><br> <a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">w3schools.com</a><br> </div> </div> </body> </html>

    Read the article

  • Block Hover Effect - Why doesn't it work correctly in FF3.6?

    - by Brian Ojeda
    Why doesn't following code work correctly in FireFox 3.6? I have tested in IE7, IE8, and Chrome with out any issues. Issue: The first block hover link (the table's 3rd row) doesn't apply the same style/effect as the following below it. Notes: I am trying to create my own table framework. This project is something I am doing to learn more about CSS. Before I started, I thought I knew a lot about CSS. However, to my surprise I was wrong. Who knew? Moving on... As side note, I do not want to take the time to support IE6. So, if you see a problem related IE6, please don't waste your time telling. One another side note, the following style script and HTML listed when this question is strip-down/bare-bone of the complete CSS/HTML. It should be enough to assist me. CSS: /* Main Properties */ .ojtable{display:block;clear:both; margin-left:auto;margin-right:auto; margin-top:0px; width:650px;} .ojtable-row, .ojtable-head {display:block;clear:both;position:relative; margin-left:0px;margin-right:0px;padding:0px;} .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-1-b1, .col-2-b1, .col-3-b1, .col-4-b1, .col-5-b1, .col-6-b1, .col-7-b1, .col-8-b1, .col-9-b1, .col-10-b1, .col-11-b1, .col-12-b1, .col-13-b1 {display:block;float:left;position:relative; margin-left:0px;margin-right:0px;padding:0px 2px;} /* Border */ .border-b1{border:solid #000000; border-width:0 0 1px 0;} .border-ltr{border:solid #000000; border-width:1px 1px 0 1px;} /* Header */ .ojtable-row{width:100%;} .ojtable-head{width:100%;} /* No Border*/ .col-2{width:96px;} /* Border: 1px */ .col-2-b1{width:95px;} .col-7-b1{width:345px;} /*--- Clear Floated Elements ---*/ /* Credit: http://sonspring.com/journal/clearing-floats */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* Credit: http://perishablepress.com/press/2008/02/05/ lessons-learned-concerning-the-clearfix-css-hack/ */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display:inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ /*--- Hover Effect for the Tables ---*/ a {text-decoration:none;} * .ojtable a .ojtable-row{width:650px; display:block; text-decoration:none;} * html .ojtable a .ojtable-row {width:650px;}/* Hover Fix for IE */ .ojtable a:hover .ojtable-row{background:#AAAAAA; cursor:pointer;} HTML: <div class="ojtable border-ltr clearfix"> <div class="ojtable-row border-b1 clearfix"> <div class="col-13">Newest Blogs</div> </div> <div class="ojtable-row border-b1 clearfix"> <div class="col-7-b1 border-r1">Name</div> <div class="col-4-b1 border-r1">Creater's Name</div> <div class="col-2">Dated Created</div> </div> <a href="#"><div class="ojtable-row border-b1 clearfix"> <div class="col-7-b1 border-r1">Why jQuery?</div> <div class="col-4-b1 border-r1">Gramcracker</div> <div class="col-2">Mar 11 2010</div> </div></a> <a href="#"><div class="ojtable-row border-b1 clearfix"> <div class="col-7-b1 border-r1">Thank You For Your Help</div> <div class="col-4-b1 border-r1">O'Hater</div> <div class="col-2">Nov 2 2009</div> </div></a> <a href="#"><div class="ojtable-row border-b1 clearfix"> <div class="col-7-b1 border-r1">Click Me! Hahaha!</div> <div class="col-4-b1 border-r1">Brian Ojeda</div> <div class="col-2">Nov 29 2008</div> </div></a> <a href="#"><div class="ojtable-row border-b1 clearfix"> <div class="col-7-b1 border-r1">Moment of Zen</div> <div class="col-4-b1 border-r1">Jedi</div> <div class="col-2">Mar 11 2010</div> </div></a> <a href="#"><div class="ojtable-row border-b1 clearfix"> <div class="col-7-b1 border-r1"></div> <div class="col-4-b1 border-r1">SGT OJ</div> <div class="col-2">Mar 11 2010</div> </div></a> </div> <!-- End of Table --> PS: Thank you for assistant, if you do choose to help.

    Read the article

  • Symfony 1.4 Layout footer glitch: Footer div is echoed out with $sf_content

    - by Parijat Kalia
    I have a very simple Layout for my application. A header, the main content, and a footer. Semantically, they are rendered like this: <body> <div id = "header"> </div> <div id = "content"> </div> <div id = "footer"> </div> </body> The corresponding CSS is very basic as well: #header{ width:100%; min-height:10%; } #center{ width:100%; min-height:80%; } #footer{ width:100%; min-height:10%: } As you would know in the layout page, here is how the content is rendered: <div id= "content"> <?php echo $sf_content; ?> </div> All of the above is very fine and it renders itself as it is supposed to. But there is a glitch with this, the moment i put in <?php echo $sf_content; ?> the footer is included as part of the content and not as a div that is after the #content markup. Essentially, I get this: <div id = "header"></div> <div id = "content> <div id ="symfony_template_to_be_rendered"> <!-- all web application related content like forms etc. --> </div> <div id = "footer">Footer material </div> </div> As you can see, for some weird reason, the footer moved up along with the symfony content. Clearly this is a glitch because if I remove the php hash $sf_content part from the div tags in my layouts, then the footer renders itself as and where it should be and everything takes up the required dimensions. What's going on here?

    Read the article

  • jquery checkbox help

    - by sea_1987
    The Problem I am trying to run some ajax on one my pages for my website, basically I have three checkboxes all of which on pageload are unselected, when a checkbox is clicked I need to be able load in via ajax the relevant HTML. This system is currently a PHP script that depending on what the POST is set returns a different view, so I think all I need to is send the POST via AJAX, but I need to do everytime a new checkbox is checked. My HTML looks like this, div class="segment"> <div class="label"> <label>Choose region: </label> </div> <div class="column w190"> <div class="segment"> <div class="input"> <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide"> </div> <div class="label "> <label for="inp_Nationwide">Nationwide</label> </div> <div class="s">&nbsp;</div> </div> </div> <div class="column w190"> <div class="segment"> <div class="input"> <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire"> </div> <div class="label "> <label for="inp_Lancashire">Lancashire</label> </div> <div class="s">&nbsp;</div> </div> </div> <div class="column w190"> <div class="segment"> <div class="input"> <input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire"> </div> <div class="label "> <label for="inp_West_Yorkshire">West Yorkshire</label> </div> <div class="s">&nbsp;</div> </div> <div class="s">&nbsp;</div> </div> </div> My current attempt was to ascertain whether the input has been clicked so I have done this with my javascript, though this is probably wrong, $('input.radio').click(function(){ if($(this).hasClass('clicked')) { $(this).removeClass('clicked'); } else { $(this).addClass('clicked'); } });

    Read the article

  • How do I manipulate the scroll bars so that a div with content that changes size is showing the same

    - by Shaun
    What I have is a div, for example is 800*800 px, and inside of this div is a SVG image, which can fit in the div but also can get very large, say 5000*5000 px, and I need to manipulate the scrollbars so that when the SVG has changed size the scrollbars adjust so that you are seeing the same center of your 'viewport' that you were seeing before. The reason I use 'viewport' is because I have seen exactly what I am trying to achieve done in WPF. Initially it sets the center as the center of the SVG so that when the SVG gets larger then the container the scrollbars automatically scroll to show the center of the SVG. If the user scrolls the 'viewports' center is updated and any changes in size now center there. I need this to be cross-browser compliant and done only with javascript. However I really don't care what container the SVG is being bounded by.

    Read the article

  • javascript replace div tags for p tags where it has no class

    - by Tom
    I would like to replace div tags for p tags but only when the div tag does not have a class. So this: <div class="myDiv"> <div>sdfglkhj sdfgkhl sdfkhgl sdf</div> <div>dsf osdfghjksdfg hsdfg</div> </div> Would become: <div class="myDiv"> <p>sdfglkhj sdfgkhl sdfkhgl sdf</p> <p>dsf osdfghjksdfg hsdfg</p> </div> I've tried .replace("<div>", "<p>").replace("</div>","</p>") but this replaces the closing tag of the one with a class.

    Read the article

  • Toggle block in jQuery

    - by user201140
    I'd like to click a header link and have the block directly underneath hide or show (with slideToggle) Thanks <div class='header'><a href='#'>Header</a></div> <div class='block'> <div class='test>Some Text</div> <div class='test>Some Text</div> <div class='test>Some Text</div> </div> <div class='header'><a href='#'>Header</a></div> <div class='block'> <div class='test>Some Text</div> <div class='test>Some Text</div> <div class='test>Some Text</div> </div> <div class='header'><a href='#'>Header</a></div> <div class='block'> <div class='test>Some Text</div> <div class='test>Some Text</div> <div class='test>Some Text</div> </div>

    Read the article

  • jQuery click event to make a div slide down and push next div out of viewport

    - by Josh
    I'm trying to figure out how to make jQuery slide #content2 down and replace content1 with it while making it look like #content1 is actually being pushed down by #content1 removing it from view... Then the same button that was clicked to make #content2 replace #content1 would also need to do the reverse effect by replacing #content2 with #content1 making them slide up and push each other out of the way... I'm not all that great with jQuery so I'm sure I've gone about this the wrong way, but here's what I've tried: $(document).ready(function() { $('#click').click(function() { if($('#content1').is(':visible')) { $('#content1').slideUp(); } else { $('#content2').slideDown(); } }).click(function() { if($('#content1').is(':visible')) { $('#content2').slideDown(); } else { $('#content1').slideUp(); } }); });

    Read the article

  • jQuery toggling div visibility

    - by Eef
    I have a HTML document with the below setup: <div class="main-div" style="padding: 5px; border: 1px solid green;"> <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple"> First Div <a href="#" class="control">Control</a> </div> <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;"> Second Div <a href="#" class="control">Control</a> </div> </div> I also have a CSS class setup called hidden with display setup to none. I have jQuery setup like so: $('.control').click(function(){ var master = $(this).parent().parent(); var first_div = $(master).find(".first-div"); var second_div = $(master).find(".second-div"); $(first_div).toggleClass("hidden") $(second_div).toggleClass("hidden") }); This setup toggles the visibility of the divs, click the control button it hides one div and show the other. However this just hides and shows each div in a flash. I am looking to add some animation to the transitioning of the divs, maybe have one slide up and the other slide down when the 'control' is clicked and vice versa but I am unable to achieve this. Could anyone help out and give some advice on how to do this? Cheer Eef

    Read the article

  • Slide navigation problem multiple div movement

    - by littleMan
    I have almost figured it out but still doesn't quite work the way i want it to. my problem is this part. It scrolls the first element to the left but the second element just appears and doesn't scroll does anyone know what todo here. var i = jQuery('.wikiform .wizard .view').size(); jQuery('.wikiform .navigation input[name^=Next]').click(function () { jQuery('.wikiform .wizard .view').each(function (j) { jQuery(this).animate({ marginLeft: -(current.next().width() * (i - j)) }, 750); /*line above Im having problems with ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ current = current.next(); j++; }); }); my complete code down below test it out and see what Im doing wrong (function ($) { $.fn.WikiForm = function (options) { this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard'; var current = jQuery('.wikiform .view:first'); function positionForm() { jQuery('body') .css('overflow-y', 'hidden'); jQuery('<div id="overlay"></div>') .insertBefore('.wikiform') .css('top', jQuery(document).scrollTop()) .animate({ 'opacity': '0.8' }, 'slow'); jQuery('.wikiform') .css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height()) .css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2) .css('width', jQuery('.wikiform .wizard .view:first').width()) .css('left', -jQuery('.wikiform').width()) .animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750); jQuery('.wikiform .wizard') .css('overflow', 'hidden') .css('height', jQuery('.wikiform .wizard .view:first').height()); } if (this.Mode == "Wizard") { return this.each(function () { positionForm(); //alert(current.next().width()); var i = jQuery('.wikiform .wizard .view').size(); jQuery('.wikiform .navigation input[name^=Next]').click(function () { jQuery('.wikiform .wizard .view').each(function (j) { jQuery(this).animate({ marginLeft: -(current.next().width() * (i - j)) }, 750); current = current.next(); j++; }); }); jQuery('.wikiform .navigation input[name^=Back]').click(function () { }); }); } else if (this.Mode == "CancelOk") { return this.each(function () { }); } else { return this.each(function () { }); } }; })(jQuery); $(document).ready(function () { jQuery(window).bind("load", function () { jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" }); }); }); <style type="text/css"> body { margin:0px; } #overlay { background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%; } .wikiform { background-color:Green; position:absolute; } .wikiform .wizard { clear: both; } .wizard { position: relative; left: 0; top: 0; width: 100%; list-style-type: none; } .wizard .view { float:left; } .view .form { } .navigation { float:right; clear:left } #view1 { background-color:Aqua; width:300px; height:300px; } #view2 { background-color:Fuchsia; width:300px; height:300px; } </style> <title></title></head><body><form action="" method=""><div id="layout"><div id="header"> Header </div> <div id="content" style="height:2000px"> Content </div> <div id="footer"> Footer </div> </div> <div id="formView1" class="wikiform"> <div class="wizard"> <div id="view1" class="view"> <div class="form"> Content 1 </div> </div> <div id="view2" class="view"> <div class="form"> Content 2 </div> </div> </div> <div class="navigation"> <input type="button" name="Back" value=" Back " /> <input type="button" name="Next " class="Next" value=" Next " /> <input type="button" name="Cancel" value="Cancel" /> </div> </div>

    Read the article

  • Twitter Bootstrap: How to use containers and rows

    - by StackOverflowNewbie
    Assume the following layout: I'm trying to learn how to use Twitter's Bootstrap. What should the general structure of the framework's markup be? Is it this: <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> // Outside link mark up here </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span1"> // Logo mark up here </div> <div class="span4"> // Main nav mark up here </div> <div class="span3 offset4"> // User nav mark up here </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span3"> // Left sidebar mark up here </div> <div class="span6"> <div class="span6"> // Breadcrumb mark up here </div> <div class="span6"> // Main content mark up here </div> </div> <div class="span3"> // Right sidebar mark up here </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span3 offset9"> // Footer link mark up here </div> </div> </div>

    Read the article

  • CSS content overflowing containing div

    - by kaese
    Hi, Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom): All the body content of the page is held within the #content DIV: div#content { width: 960px; float: left; background-image: url("../img/contentBg.png"); background-repeat: repeat; margin-top: 10px; line-height: 1.8em; border-top: 8px solid #5E88A2; padding: 10px 15px 10px 15px; } And here is the CSS for the product boxes within the #content div: .upper { text-transform: uppercase; } .center { text-align: center; } div#products { float: left; width: 100%; margin-bottom: 25px; } div.productContainer { float: left; width: 265px; font-size: 1em; margin-left: 50px; height: 200px; padding-top: 25px; text-align: right; } div.product { float: left; width: 200px; } div.product p { } div.product a { display: block; } div.product img { float: left; } div.product img:hover { opacity: 0.8; filter: alpha(opacity = 80); } div.transparent { opacity: 0.8; filter: alpha(opacity = 80); } And here is the HTML for the boxes: <div class="productContainer"> <div class="product"> <h2 class="upper center">A2 Print</h2> <a href='../edit/?productId=5&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through MyPersonalPoster." /></a> <p class="upper">16.5 inches x 23.4 inches<br /><strong>&pound;15.99</strong></p> <p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p> <p><a href='../edit/?productId=5&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> <div class="productContainer"> <div class="product transparent"> <h2 class="upper center">A1 Print</h2> <a href='../edit/?productId=11&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through MyPersonalPoster." /></a> <p class="upper">23.4 inches x 33.1 inches<br /><strong>&pound;19.99</strong></p> <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p> <p><a href='../edit/?productId=11&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> <div class="productContainer"> <div class="product transparent"> <h2 class="upper center">Poster Print (60cm x 80cm)</h2> <a href='../edit/?productId=12&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through MyPersonalPoster." /></a> <p class="upper">23.6 inches x 31.5 inches<br /><strong>&pound;13.95</strong></p> <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p> <p><a href='../edit/?productId=12&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy! Cheers

    Read the article

  • Tab Index on div

    - by Mithun P
    Please see the form HTML code below <form method="post" action="register"> <div class="email"> Email <input type="text" tabindex="1" id="email" value="" name="email"> </div> </div> <div class="agreement"> <div tabindex="2" class="terms_radio"> <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;"> <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the ZapAV</label> </div> </div> </div> <div class="form_submit"> <input type="button" tabindex="3" value="Cancel" name="cancel"> <input type="submit" tabindex="4" value="Submit" name="submit"> </div> </form> Here I syled teh agreement check box insuch a way that radio input is completly hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the backgroud image as well as the checked status of teh radio input. I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working, Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?

    Read the article

  • show tweets inside div from an asynchronous loop

    - by ak_47
    Am trying to laod tweets into a div after looping them from yahoo placemaker. They are loading on the div but the information shown by them is placemaker's last result. This is the code.. function getLocation(user, date, profile_img, text,url) { var templates = []; templates[0] = '<div><div></div><h2 class="firstHeading">'+user+'</h2><div>'+text+'</div><div><p><a href="' + url + '"target="_blank">'+url+'</a></p></div><p>Date Posted- '+date+'</p></div>'; templates[1] = '<table width="320" border="0"><tr><td class="user" colspan="2" rowspan="1">'+user+'</td></tr><tr><td width="45"><a href="'+profile_img+'"><img src="'+profile_img+'" width="55" height="50"/></a></td><td width="186">'+text+'<p><a href="' + url + '"target="_blank">'+url+'</a></p></td></tr></table><hr>'; templates[2] = '<div><div></div><h2 class="firstHeading">'+user+'</h2><div>'+text+'</div><div><p><a href="' + url + '"target="_blank">'+url+'</a></p></div><p>Date Posted- '+date+'</p></div>'; templates[3] = '<table width="320" border="0"><tr><td class="user" colspan="2" rowspan="1">'+user+'</td></tr><tr><td width="45"><a href="'+profile_img+'"><img src="'+profile_img+'" width="55" height="50"/></a></td><td width="186">'+text+'<p><a href="' + url + '"target="_blank">'+url+'</a></p></td></tr></table><hr>'; var geocoder = new google.maps.Geocoder(); Placemaker.getPlaces(text, function (o) { console.log(o); if (!$.isArray(o.match)) { var latitude = o.match.place.centroid.latitude; var longitude = o.match.place.centroid.longitude; var myLatLng = new google.maps.LatLng(latitude, longitude); var marker = new google.maps.Marker({ icon: profile_img, title: user, map: map, position: myLatLng }); var infowindow = new google.maps.InfoWindow({ content: templates[0].replace('user',user).replace('text',text).replace('url',url).replace('date',date) }); var $tweet = $(templates[1].replace('%user',user).replace(/%profile_img/g,profile_img).replace('%text',text).replace('%url',url)); $('#user-banner').css("visibility","visible");$('#news-banner').css("visibility","visible"); $('#news-tweets').css("overflow","scroll").append($tweet); function openInfoWindow() { infowindow.open(map, marker); } google.maps.event.addListener(marker, 'click', openInfoWindow); $tweet.find(".user").on('click', openInfoWindow); bounds.extend(myLatLng); } }); }

    Read the article

  • Div not filling width of floated container (css expert needed

    - by Rayden
    I know there are many variations of this question posted, but none I've found quite provide an answer that works for this case. I basically have two left floated divs. Inside those two divs are div headers and tabled content. I want the Div headers (Hour/Minute) to stretch to the width of the tabled content, but they only do this in FF and Chrome, not IE7. IE7 is my works official browser so the one I need it to work with the most. Here is the CSS: #ui-timepicker-div { padding:0.2em; } #ui-timepicker-hours { float:left; } #ui-timepicker-minutes { margin:0 0 0 0.2em; float:left; } .ui-timepicker .ui-timepicker-header { padding:0.2em 0; } .ui-timepicker .ui-timepicker-title { line-height:1.8em; text-align:center; } .ui-timepicker table { margin:0.15em 0 0 0; font-size:.9em; border-collapse:collapse; } .ui-timepicker td { padding:1px; width:2.2em; } .ui-timepicker th, .ui-timepicker td { border:0; } .ui-timepicker td a { display:block; padding:0.2em 0.3em 0.2em 0.5em; text-align:right; text-decoration:none; } Here is the HTML (did not include tabled content): <div style="position: absolute; top: 252.667px; left: 648px; z-index: 1; display: none;" class="ui-timepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-timepicker-div"> <div id="ui-timepicker-hours"> <div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> <div class="ui-timepicker-title">Hour</div> </div> <table class="ui-timepicker"> </table> </div> <div id="ui-timepicker-minutes"> <div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> <div class="ui-timepicker-title">Minutes</div> </div> <table class="ui-timepicker"> </table> </div> </div>

    Read the article

  • Hold border and Resize two or more DIV simultaneously in the same container

    - by Manu
    Code : <div id="widget1"> <div class="part blue">this is the part</div> <div class="part white">of the genial</div> <div class="part red">and good widget</div> </div> Let's say that div#widget1 is 99px width and div.part are 33px by default. How can I easily resize div.blue by increasing its width and deacreasing width of other div.part proportionnaly ? http://jqueryui.com/demos/resizable/#synchronous-resize : give an example which show element increase in the same time. Thanks,

    Read the article

  • seeking help with Chrome & Safari not rendering my table stretched to fit its contents...help?

    - by oompa_l
    I have an element on this web page I'm developing where I need my text to conform to the width of an image above it - whose width will always be different - think of captions. I have found numerous references to using a 1px table to force this width sizing behaviour. I am having problems, though with Safari and Chrome "seeing" this instruction - the text ends up as a marginally sized text box sitting behind the image. The problem, as I see it, has to do with the text and images sitting in div's nested within the table. I need the images to sit in a div because of some jquery script I'm using called cycle, which turns a group of images into a slideshow. The problem may have something to do with the script as well. In any case, I have tried a seeming infinite number of combination of floating left and clearing left on all all the divs, changing their positions and widths...nothing works. Anyone have any clues about how to broach this one? EDIT 1: ok, should I be editing my post or responding with answers? here's the url to see the problem I am having - http://friedmanstudios.ca/webdev/test8.html and the code: <div id="content" class="boxes"> <table> <tr> <td > <div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div> <div id="cycleCtrl"> <div id="prev" class="pager"><a href="#">< Prev</a> </div> <div id="next" class="pager"><a href="#">Next ></a></div> <div id="pagerNav" class="pager"></div> </div> <div id="descController"> <img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for the Arts </span> <br /> <div id="desc"> In the past eight years... </div> </div></td> <td width="90%"><!--push col 1 back--></td> </tr> </table> and the styles: #content { position: absolute; top: 250px; left: 275px; float: left; clear: both; } content table { float: left; width: 1px; } imageFrame { position: relative; float: left; clear: left; width: inherit; } desc { position: relative; clear: left; float: left; } descController { position:relative; padding-top:5px; padding-bottom:10px; clear: left; float: left; } descController div { height:0; overflow:hidden; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; padding-top:10px; margin-top: 10px; word-spacing: 0em; line-height: 16px; font-size: 12px; position: relative; float: left; clear: left; }

    Read the article

  • How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls?

    - by user1289863
    What I'm saying is, I have some extremely long pages on my website, which can make it annoying I've my visitors need to scroll to the top of the page to be able to navigate to another page. I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results... What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this. I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response. This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML. Thanks in advance.

    Read the article

< Previous Page | 13 14 15 16 17 18 19 20 21 22 23 24  | Next Page >