Search Results

Search found 10300 results on 412 pages for 'div layouts'.

Page 32/412 | < Previous Page | 28 29 30 31 32 33 34 35 36 37 38 39  | Next Page >

  • How to implement Survey page using ASP.NET MVC?

    - by Aleks
    I need to implement the survey page using ASP.NET MVC (v.4) That functionality has already been implemented in our project using ASP.NET WebForms. (I really searched a lot for real examples of similar functionality implemented via MVC, but failed) Goal: staying on the same page (in webforms -'Survey.aspx') each time user clicks 'Next Page', load next bunch of questions (controls) which user is going to answer. Type of controls in questions are defined only in run-time (retrieved from Data Base). To explain better the question I manually created (rather simple) mark-up below of 'two' pages (two loads of controls): <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Survey.aspx.cs" Inherits="WebSite.Survey" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div><h2>Internal Survey</h2></div> <div><h3>Page 1</h3></div> <div style="padding-bottom: 10px"><div><b>Did you have internet disconnections during last week?</b></div> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem>Yes</asp:ListItem> <asp:ListItem>No</asp:ListItem> </asp:RadioButtonList> </div> <div style="padding-bottom: 10px"><div><b>Which days of the week suit you best for meeting up ?</b></div> <asp:CheckBoxList ID="CheckBoxList1" runat="server"> <asp:ListItem>Monday</asp:ListItem> <asp:ListItem>Tuesday</asp:ListItem> <asp:ListItem>Wednesday</asp:ListItem> <asp:ListItem>Thursday</asp:ListItem> <asp:ListItem>Friday</asp:ListItem> </asp:CheckBoxList> </div> <div style="padding-bottom: 10px"> <div><b>How satisfied are you with your job? </b></div> <asp:RadioButtonList ID="RadioButtonList2" runat="server"> <asp:ListItem>Very Good</asp:ListItem> <asp:ListItem>Good</asp:ListItem> <asp:ListItem>Bad</asp:ListItem> <asp:ListItem>Very Bad</asp:ListItem> </asp:RadioButtonList> </div> <div style="padding-bottom: 10px"> <div><b>How satisfied are you with your direct supervisor ? </b></div> <asp:RadioButtonList ID="RadioButtonList3" runat="server"> <asp:ListItem>Not Satisfied</asp:ListItem> <asp:ListItem>Somewhat Satisfied</asp:ListItem> <asp:ListItem>Neutral</asp:ListItem> <asp:ListItem>Satisfied</asp:ListItem> <asp:ListItem>Very Satisfied</asp:ListItem> </asp:RadioButtonList> </div> <div style="padding-bottom: 10px"> <asp:Button ID="Button1" runat="server" Text="Next Page" onclick="Button1_Click" /> </div> </form> </body> </html> PAGE 2 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Survey.aspx.cs" Inherits="WebSite.Survey" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div><h2>Internal Survey</h2></div> <div><h3>Page 2</h3></div> <div style="padding-bottom: 10px"><div><b>Did admininstators fix your internet connection in time ?</b></div> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem>Yes</asp:ListItem> <asp:ListItem>No</asp:ListItem> </asp:RadioButtonList> </div> <div style="padding-bottom: 10px"><div><b>What's your overal impression about the job ?</b></div> <asp:TextBox ID="TextBox1" runat="server" Height="88px" Width="322px"></asp:TextBox> </div> <div style="padding-bottom: 10px"> <div><b>Select day which best suits you for admin support ? </b></div> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>Select day</asp:ListItem> <asp:ListItem>Monday</asp:ListItem> <asp:ListItem>Wednesday</asp:ListItem> <asp:ListItem>Friday</asp:ListItem> </asp:DropDownList> </div> <div style="padding-bottom: 10px"> <asp:Button ID="Button1" runat="server" Text="Next Page" onclick="Button1_Click" /> </div> </form> </body> </html>

    Read the article

  • jQuery DataTables is messing op my CSS grids in IE8, how to fix?

    - by Brendan Vogt
    I am using ASP.NET MVC3 with the jQuery Datatable plug in. I am having an issues with my CSS layout when the datatable is on a page. If there is no datatable then everything displays fine. When the datatable is on the screen then it overlaps the footer of my website. I can't seem to get this to display correctly. I have a grid layout using the YUI3, and this is what I all use from YUI3 (in this order): cssreset-min cssfonts-min cssgrids-min cssbase-min This works fine in the latest version of FireFox. I am only testing on IE8, this is a requirement and most of the people at my work uses IE8. I have minified my HTML so that only the bare minimum is available. This is my HTML: <!DOCTYPE html> <html> <head> <title>My Website</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <link href="/Assets/Stylesheets/hef2.css" rel="stylesheet" /> <link href="/Assets/Stylesheets/jQuery-DataTables/css/jquery.dataTables.css" rel="stylesheet" /> </head> <body> <div id="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> <div id="bd"> <div class="yui3-g"> <div class="yui3-u" id="nav"> <div id="nav-container"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> </div> </div> <div class="yui3-u" id="main"> <div id="main-container"> <div class="content"> <h1>Banks Dashboard</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <div id="banks-datatable-wrapper"> <div id="banks-datatable-container"></div> <div style="clear:both;"></div> </div> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> </div> </div> </div> </div> <div id="ft">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> <script src="/Assets/JavaScripts/jQuery/jquery-1.7.2.min.js"></script> <script src="/Assets/JavaScripts/jQuery-DataTables/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#banks-datatable-container').html('<table class="display" id="banks-datatable"></table>'); $('#banks-datatable').dataTable({ "aoColumns": [ { "sTitle": "Engine" }, { "sTitle": "Browser" }, { "sTitle": "Platform" }, { "sTitle": "Version", "sClass": "center" }, { "sTitle": "Grade" } ], "bAutoWidth": false, "bFilter": false, "bLengthChange": false, "bProcessing": true, //"bServerSide": true, "bSort": false, "iDisplayLength": 11, "sAjaxSource": '/Administration/Bank/List2' }); }); </script> </body> </html> This is the only CSS that I currently use together with the CSS of YUI3: body { margin: auto; width: 1025px; } #nav { width: 300px; } #main { width: 725px; } Can someone please help me get this sorted out? I have tried tried adding clear:both but it didn't work. Is the an online service like jsbin where I can paste/upload my HTML/CSS code/files? Code can viewed at: http://live.datatables.net/efosuj/3/edit. It displays correctly in the available viewer but when run separate in IE8 then it gives issues. UPDATE 2012-06-12 I managed to add the following and it works, but I would like to add it in a style, tried it but it didn't work: if (navigator.userAgent.toString().indexOf('MSIE') >= 0) { jQuery('#main-container').css('overflow', 'auto'); } This was added after the grid was loaded. Is this the only way to do this?

    Read the article

  • PHP contact form sends empty data

    - by Alan Lawlessness
    I am trying to create a HTML5 contact form compatible with computer and mobile devices, when I clicked on send message it jumps into a blank white screen. I do get a email but it contains no information. I am quite new with PHP. For www.rare1.ca/test: <!DOCTYPE html> <html> <head> <title>Responsive HTML5/CSS3 template</title> <meta charset="utf-8" /> <meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum- scale=1" /> <link rel="stylesheet" type="text/css" href="css/default.css" media="all" /> <link rel="stylesheet" href="css/flexslider.css" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script src="js/jquery.flexslider.js"></script> <script src="js/default.js"></script> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <header id="header"> <div class="center"> <nav id="mainNav"> <ul> <li class="active"><a href="#pagewidth"><span>gallery</span></a></li> <li></li> <li></li> <li></li> <li></li> <li><a href="#contactUs"><span>contact us</span></a></li> </ul> </nav> </div> </header> <div id="content"> <section class="row"> <div class="center"> <h1><img src="img/logo.gif" width="142" height="78"></h1> <strong class="subHeading">Coming soon</strong> <div class="gallery"> <ul class="slides"> <li><img src="img/img-gallery.jpg" alt="image" /></li> <li><img src="img/img-gallery2.jpg" alt="image" /></li> <li><img src="img/img-gallery3.jpg" alt="image" /></li> </ul> </div> <div class="buttons"></div> </div> </section> <section id="contactUs" class="row grey"> <div class="center"> <h1>Contact Us</h1> <strong class="subHeading">lorem ipsum dolor sit amet, consectetur adipiscing elit</strong> <div class="columns"> <div class="half"> <form action="sendemail.php" class="form"> <fieldset> <h2>Feedback form</h2> <div class="formRow"> <div class="textField"><input type="text" name="Name" id="name" placeholder="Your name ..." /></div> </div> <div class="formRow"> <div class="textField"><input type="text" name="Email" id="email" placeholder="Your Email ..." /></div> </div> <div class="formRow"> <div class="textField"><textarea name="Message" cols="20" rows="4" placeholder="Your message ..."></textarea> </div> </div> <div class="formRow"> <button class="btnSmall btn submit right"> <span>Send Message</span> </button> </div> </fieldset> </form> </div> <div class="half"> <h2>How to find us</h2> <div id="map"> <div class="imgHolder"><img src="img/map.jpg" alt="google map" /></div> </div> </div> </div> </div> </section> </div> <footer id="footer"> <div class="center"> </div> </footer> </div> </body> </html> <?php // This is the script for sending email. // change the email address below to your own email address. $mailTo = '[email protected]'; $name = htmlspecialchars($_POST['Name']); $mailFrom = htmlspecialchars($_POST['Email']); $message_text = htmlspecialchars($_POST['Message']); $headers = "From: $name <$mailFrom>\n"; $headers .= "Reply-To: $name <$mailFrom>\n"; $message = $message_text; mail($mailTo, $subject, $message, $headers ); ?>

    Read the article

  • Creating a second login page that automatically logs in the user

    - by nsilva
    I have a login page as follows: <form action="?" method="post" id="frm-useracc-login" name="frm-useracc-login" > <div id="login-username-wrap" > <div class="login-input-item left"> <div class="div-search-label left"> <div id="div-leftheader-wrap"> <p class="a-topheader-infotext left"><strong>Username: </strong></p> </div> </div> <div class="login-input-content left div-subrow-style ui-corner-all"> <input type="text" tabindex="1" name="txt-username" id="txt-username" class="input-txt-med required addr-search-input txt-username left"> </div> </div> </div> <div id="login-password-wrap" > <div class="login-input-item left"> <div class="div-search-label left"> <div id="div-leftheader-wrap"> <p class="a-topheader-infotext left"><strong>Password: </strong></p> </div> </div> <div class="login-input-content left div-subrow-style ui-corner-all"> <input type="password" tabindex="1" name="txt-password" id="txt-password" class="input-txt-med required addr-search-input txt-password left"> </div> </div> </div> <div id="login-btn-bottom" class="centre-div"> <div id="login-btn-right"> <button name="btn-login" id="btn-login" class="btn-med ui-button ui-state-default ui-button-text-only ui-corner-all btn-hover-anim btn-row-wrapper left">Login</button> <button name="btn-cancel" id="btn-cancel" class="btn-med ui-button ui-state-default ui-button-text-only ui-corner-all btn-hover-anim btn-row-wrapper left">Cancel</button><br /><br /> </div> </div> </form> And here my session.controller.php file: Click Here Basically, what I want to do is create a second login page that automatically passes the value to the session controller and logs in. For example, if I go to login-guest.php, I would put the default values for username and password and then have a jquery click event that automatically logs them in using $("#btn-login").trigger('click'); The problem is that the session controller automatically goes back to login.php if the session has timed out and I'm not sure how I could go about achieving this. Any help would be much appreciated!

    Read the article

  • jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed

    - by trickymatt
    Hello, I have a hidden panel off the left side of the screen which slides into view on the click of a 'tab' positioned on the left side of the screen. I need the panel to slide over the top of the existing page content, and I need the tab to move with it. and so both are absolutely positioned in css. Everything works fine, apart from I need the tab (and thus the tab-container) to move left with the panel when it is revealed, so it appears to be stuck to the right-hand-side of the panel. Its relatively simple when using floats, but of course this affects the layout of the existing content, hence absolute positioning. I have tried animating the left position of the panel-container (see the documented jquery function), but I cant get it to work. My HTML <div><!--sample page content--> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> </div> <div id="panel" class="height"> <!--the hidden panel --> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> </div> </div> <!--if javascript is disabled use this link--> <div id="tab-container" class="height"> <a href="#" onclick="return()"> <div id="tab"><!-- this will activate the panel. --></div> </a> </div> My jQuery $(document).ready(function(){ $("#panel, .content").hide(); //hides the panel and content from the user $('#tab').toggle(function(){ //adding a toggle function to the #tab $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px // THIS NEXT FUNCTION DOES NOT WORK --> function() { $('#tab-container').animate({left:"400px"} //400px to match the panel width }); function() { $('.content').fadeIn('slow'); //slides the content into view. }); }, function(){ //when the #tab is next cliked $('.content').fadeOut('slow', function() { //fade out the content $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0 }); }); }); and this is the css #panel { position:absolute; left:0px; top:50px; background-color:#999999; height:500px; display:none;/*hide the panel if Javascript is not running*/ } #panel .content { width:290px; margin-left:30px; } #tab-container{ position:absolute; top:20px; width:50px; height:620px; background:#161616; } #tab { width:50px; height:150px; margin-top:100px; display:block; cursor:pointer; background:#DDD; } Many thanks

    Read the article

  • css issue for alignment of divs

    - by jay
    Hi, I am working on this site philippdecor.com and I am having a difficulty in figuring out this css issue. When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it. Two things happens, 1) in IE(7) - the drop down hides behind another div 2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine. I am not sure which css property can fix this. please help me out code

    Read the article

  • making changes in master page from front(calling) page in vb.net

    - by ferrer
    i have a page called a1.aspx, with the Masterpagefile = a1_master.master. Now the master page has its own div's and images for design purpose. I want a way where when i load a1.aspx, certain chosen 's and images should be hidden (visible=false). how can i do this? how can i change the visibility of a div or an image in the master page from the calling page?

    Read the article

  • HTML: order of divs and a tags for href

    - by user2962389
    I'm busy with HTML and CSS and got stuck with this. I have created a button with :hover and :active options, which is centered on the page. Clicking on this button needs to lead to a website. My HTML is: <div> <a href="website"><div id="button">Text</div></a> </div> The CSS is: body, html { height: 100%; } a { text-decoration: none; } #button { text-transform: uppercase; font-size: 18px; text-align: center; padding: 1em 0.5em 0.8em; background-color: white; font-family: Myriad Pro, Source Sans Pro, Helvetica, Arial, sans-serif; color: #ff4700; cursor: pointer; width: 150px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #ff4700; margin-left: auto; margin-right: auto; margin-bottom: 50px; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #button:hover { background-color: #ff4700; color: white; border: 1px solid white; } #button:active { background-color: #cc3900; } The problem lies in the fact that the whole width of the page is clickable at the height of the button and not only the button itself that is 150px wide and is centered on the page. I think I have my divs mixed up and it needs other formatting and precedence, but I'm not sure. Thanks for your help! P.S. First time on StackOverflow, sorry if I formatted something wrong.

    Read the article

  • HTML footer problem

    - by Sir Psycho
    Hello Is it possible to create a footer div that sits at the bottom of a site regardless of how much information is present in the middle? Currently the div I have is positioned depending on how much content i have in the body. See also: http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page

    Read the article

  • Fading Element on Scroll

    - by user179846
    I'm curious how I can create a DIV (or anything really) that I can fade (or change opacity of) when a user scrolls down the page. This DIV would sit at the top of the page, but only be clearly visible when at the very top of the page. Additionally, it would be ideal if I I could have this element fade back in onmouseover, regardless of the current scrolled position on the page.

    Read the article

  • div innerHTML problem with updatepanel

    - by asif
    I have an application developed in asp.net which set innerhtml of div. I am creating an html string to show googlemap. It works fine. But when I put my div inside update panel. it doesnt show googlemap in div. Here is my aspx file code: </td> </tr> <tr> <td colspan="4"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <div id="map_canvas" runat="server" style="width: 100%; height: 1500px; margin-bottom: 2px; text-align: center;"> <asp:Panel ID="Panel1" runat="server"> <%--Place holder to fill with javascript by server side code--%> <asp:Literal ID="js" runat="server"></asp:Literal> <%--Place for google to show your MAP--%> <div id="Div1" style="width: 100%; height: 728px; margin-bottom: 2px;"> </div> <br /> </asp:Panel> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnShow" EventName="Click" /> </Triggers> </asp:UpdatePanel> </td> </tr> here is my button click event. protected void btnShow_Click(object sender, EventArgs e) { // works fine without update panel. map_canvas.InnerHtml = showMapWithPoints(); }

    Read the article

  • Float a div in top right corner without overlapping sibling header

    - by Maxime R.
    Having a div and a h1 inside a section, how do i float the div in the top right corner without overlapping the text of the header ? The HTML code is the following: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> <div><button>button</button></div> </section> I tried an absolute position relative to the parent but the text is overlapped, http://jsfiddle.net/FnpS8/2/ Using this CSS code: section { position: relative; } h1 { display: inline; } div { position: absolute; top: 0; right: 0; } I tried floating the div to the right but it doesn't remain in the top right corner, http://jsfiddle.net/P6xCw/2/ Using this CSS code: h1 { display: inline; } div { float: right; } ? I know there is a lot of similar questions but I couldn't find one solving this case.

    Read the article

  • jaquer - hide if prev has class

    - by Tillebeck
    Hi I would like to hide all class="csc-content" where previous sibling is a h4 class="faq". UPDATE Error: I think this is wrong... the previous sibling is not h4. But I hope you get the point that all "answer" shall be hidden if the "question" has the class "faq" /UPDATE This is the html: <div id="centerCol-1"> <div id="c65" class="csc-default normal"> <div class="csc-header csc-header-n1"><h4 class="faq">FAQ question1</h4></div> <div class="csc-content active"><p class="bodytext">Answer1</p></div> </div> <div id="c67" class="csc-default normal"> <div class="csc-header csc-header-n2"><h4 class="faq">FAQ question2</h4></div> <div class="csc-content active"><p class="bodytext">Answer2</p></div> </div> <div id="c68" class="csc-default normal"> <div class="csc-header csc-header-n3"><h4>not FAQ</h4></div> <div class="csc-content active"><p class="bodytext">Not an answer, just normal content</p></div> </div> </div> jQuery should be something like: // find all outer divs with class csc-default in the div centerCol-1 // test if they contain a header div with an h4 class faq // go to next element and hide it. Error... this should be parents next element? $("#centerCol-1 .csc-default").find("h4").is(".faq").next(".csc-content").hide(); BR. Anders

    Read the article

  • jQuery - hide if previous element has a particular class

    - by Tillebeck
    Hi I would like to hide all class="csc-content" where previous sibling is a h4 class="faq". UPDATE Error: I think this is wrong... the previous sibling is not h4. But I hope you get the point that all "answer" shall be hidden if the "question" has the class "faq" /UPDATE This is the html: <div id="centerCol-1"> <div id="c65" class="csc-default normal"> <div class="csc-header csc-header-n1"><h4 class="faq">FAQ question1</h4></div> <div class="csc-content active"><p class="bodytext">Answer1</p></div> </div> <div id="c67" class="csc-default normal"> <div class="csc-header csc-header-n2"><h4 class="faq">FAQ question2</h4></div> <div class="csc-content active"><p class="bodytext">Answer2</p></div> </div> <div id="c68" class="csc-default normal"> <div class="csc-header csc-header-n3"><h4>not FAQ</h4></div> <div class="csc-content active"><p class="bodytext">Not an answer, just normal content</p></div> </div> </div> jQuery should be something like: // find all outer divs with class csc-default in the div centerCol-1 // test if they contain a header div with an h4 class faq // go to next element and hide it. Error... this should be parents next element? $("#centerCol-1 .csc-default").find("h4").is(".faq").next(".csc-content").hide(); BR. Anders

    Read the article

  • CSS ] how to automatically resize the wrapper div.

    - by Phrixus
    Hi, I've been struggling with this problem.. There is a wrapper div and it contains 3 vertical column divs with full of texts, and this wrapper div has red background color so that it can be a background of the entire texts. <div id="content_wrapper"> <div id="cside_a"> // massive texts goes here </div> ... // two more columns go here. </div> And here is the CSS code for them. #content_wrapper { background-color:#DB0A00; background-repeat:no-repeat; min-height:400px; } #cside_a, #cside_b, #cside_c { float: left; width: 33%; } And this code gives me a background that covers only 400px height box.. My expectation was the wrapper div automatically resizes depending on the size of the divs in it. Somehow putting "overflow:hidden" with wrapper CSS code makes everything work fine. I have no idea why "overflow:hidden" works.. shouldn't this hide all the overflowed texts..? Could anyone explain me why? Is is the correct way to do it anyway?

    Read the article

  • jQuery - select onchange to slide in / slide out div or form

    - by slayaz
    Hi, I am trying to enhance a form, by showing only relevant fields depending on initial selection via a form select field. It is an order form for 3 products and all 3 products have unique properties. My idea was to hide all the content in divs, then reveal the relevant div when the product is selected. I have found some solutions that show / hide a div, but none with any animation. It doesn't have to be a slide but just something nice! The alternative is instead of revealing a div, would be to load a seperate form, but this seems unnecessary. I am not sure whether i need a plug in, as I am pretty new to jquery. What i have in the html is: <style type="text/css"> .hide { display:none; } <select> <option value="" >Please select product below</option> <option value="pro1">Product 1</option> <option value="pro2">Product 2</option> </select> <div id="pro1" class="hide" >Product 1</div> <div id="pro2" class="hide" >Product 2</div> Many thanks in advance

    Read the article

  • Hide / show div toggle

    - by aa1
    I have the following mark up with a basic and advanced search divs. <div class="form"> <form> <input type="text" name="first_name"> <input type="text" name="last_name"> <div id="Basic" class="slide"> <input type="text" name="location"> </div> <a onclick="ShowDiv('Adv');">+ show advanced fields</a> <div id="Adv" class="slide hidden"> <input type="text" name="first_name2"> <input type="text" name="last_name2"> <input type="text" name="street"> <input type="text" name="town"> <input type="text" name="country"> </div> </form> <a onclick="ShowDiv('Basic');">- hide advanced fields</a> </div> The toggle is achieved with the following script function HideDiv() { $('.slide').hide(); } function ShowDiv(ctrl) { HideDiv(); $('#' + ctrl).show(); } ShowDiv('Basic'); I need to eliminate the need of using both links. I need to have only one link depending on state. So if the div basic is shown as default the link will say show advanced. When the advanced is shown the anchor link should switch to hide advanced How do I need to edit my jQuery and mark up.

    Read the article

  • jQuery Manual Resizable DIV

    - by JC
    Hi, I'm trying to create a resizable div without using jQuery's interface library. var myY = 0; var mouseDown = false; var originalHeight = 0; function resize(e){ if(mouseDown == true){ $("#cooldiv").height(originalHeight+e.pageY-myY); } } $(document).ready(function(){ $().mouseup(function(e){ myY = 0; mouseDown = false; originalHeight = 0; $().unbind("mousemove", resize); }); $("#resizeBar").mousedown(function(e){ myY = e.pageY; originalHeight = $("#cooldiv").height(); mouseDown = true; $().bind("mousemove", resize); }); }); ... <div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;"> <div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div> </div> The first resize works fine(i.e. mousedown, mousemove then mouseup), but on subsequent (mousedown+mousemove)s, the browser attempts to drag the whole resizeBar div instead of properly resizing its parent container. On mouseup, the div then starts resizing "cooldiv" on mousemove without any mousedown required, until a further click of the mouse. These problems don't show up in Internet Explorer.

    Read the article

  • HTML/Javascript: Selecting uncles/aunts

    - by DavidR
    So I have some code, <div class="chunk" id=""> <div class="chunkContent"> <div class="textLeft" ></div> <div class="textRight" ></div> <div class="notes border">Notes...</div> </div> <div class="tools fl"> <div class="toggleNotes border">n</div> <div class="addChunk border">+</div> </div> </div> Now, the two divs nested withing div.tools are small buttons. div.toggleNotes I need to select div.notes in a javascript/jquery function. div.addChunk I need to select the fisrt div, div.chunk. Currently, I am doing this by: $(".addChunk").live('click', (function(){create_chunk(this.parentNode.parentNode)})) $(".toggleNotes").live('click',function(){toggle_notes(this.parentNode.parentNode.firstElementChild.lastElementChild)}) Is there a better (i.e., more proper) way to do this than to string together parentNotes and firstElementChild's and etc.? I'm basically looking around the DOM tab in firebug.

    Read the article

  • Think this is a naming problem

    - by RussP
    Must be really dumb today - sorry in advance; anyhow have this unordered list <ul> <li><div class="openuserform" >Info</div> <div class="userform"></div></li> <li><div class="openuserform" >Appearence</div> <div class="userform"></div></li> <li><div class="openuserform" >Pages</div> <div class="userform"></div></li> <li><div class="openuserform" >Services</div> <div class="userform"></div></li> <li><div class="openuserform" >Community</div> <div class="userform"></div></li> </ul> which on click <div class="openuserform" > I want to load a separate form e.g. $('.openusersform').live('click',(function(){ $('.userform').load('form page.php'); }); OK I can get the forms to load in the right div using $(this).next('.userform').show(); $('.userform').load('form page.php'); but it's very ugly (I think) and I can only every get the first form to process propery. It is laid out like (ul,li etc.) this so I can have each loaded form aligned under the relevant li. But I think there has to be a better way as I do not seem to get any if(){} stemnents working to process the forms i.e. if(form1){ $.ajax etc } if (form2) {more ajax} Suggestions please - thanks

    Read the article

  • Is there anyway to show a hidden div in the last row of a html table

    - by oo
    i have an html table. here is a simplified version: <table> <tr> <td><div style="display: none;" class="remove0">Remove Me</div></td> </tr> <tr> <td><div style="display: none;" class="remove1">Remove Me</div></td> </tr> <tr> <td><div class="remove2">Remove Me</div></td> </tr> </table> i have javascript that clicks on Remove Me in the last row and it deletes the html row using: $(this).parents("tr:first").remove(); the issue is that when i remove this last row, i also want the "Remove Me" text to now show up on the second row (which is now the new last row). how would i show this div so that it would dynamically show the "remove me" from the new last row?

    Read the article

  • Margin-Top push outer div down

    - by Daniel Hertz
    Hello, I have a header div as the first element in my wrapper div, but when I add a top margin to a h1 inside the header div it pushes the entire header div down. I realize this happens whenever I apply a top margin to the first visible element on a page. Here is a sample of the css. Thanks! div#header{ width: 100%; background-color: #000; position: relative; } div#header h1{ text-align: center; width: 375px; height: 50px; margin: 0 auto; font-size: 220%; text-indent: -5000px; background: url('../../images/name_logo.png') no-repeat; } html part <div id="header"> <h1><a href="/home.php">Title</a></h1> <ul id="navbar">

    Read the article

  • CSS Container DIV Not Expanding

    - by rsmith84
    I've been researching this for hours now and it seems to be an IE thing but my issue is that I have a container DIV that, in IE9, doesn't expand and cuts everything off after about 400px. Chrome and FF work perfectly, of course. Container DIV #main_container{ font-family: arial, verdana; width: 920px; top: 0; margin-left: auto; margin-right: auto; background-color: #fff; overflow-x: hidden; } Page Container DIV #page_container{ font-family: arial, verdana; font-size: 14px; width: 900px; color: #000; border: 0px solid; overflow: hidden; } And the standard markup of page block looks like this <div id="main_container"> <div id="page_container"> Variable page data goes here </div> </div> Is there an issue with my CSS that I'm missing or is there an IE hack that I need to apply?

    Read the article

  • Proper way to communicate between divs in jquery?

    - by folder
    This is probably a simple question, and i'm just being dense. I've looked through a few jquery books and nothing has jumped out at me, i'm probably missing something. I'm looking for the 'proper', best practices way to communicate between divs/dom items on a page? For example, I have a page with 5 panels that display when a link is chosen, they hide/show/run some code that changes other pieces on the page. Something like this snippet: <ul> <li><div id="unique_name_1_anchor">Unique div 1</div></li> <li><div id="unique_name_2_anchor">Unique div 2</div></li> <li><div id="unique_name_3_anchor">Unique div 3</div></li> <li><div id="unique_name_4_anchor">Unique div 4</div></li> </ul> ...Somewhere else on the page <div id="unique_name_1_panel">Some panel 1 stuff here</div> <div id="unique_name_2_panel">Some panel2 stuff here<div> <div id="unique_name_3_panel">Some panel3 here</div> <div id="unique_name_4_panel">Some panel4 here</div> The concept being when as user clicks on a unique_name_X_anchor div, some action is performed on the corresponding panel (ie show/hide etc...). What I have been doing now is parsing the id ie ($(this).replace("_anchor","_panel") to get the div id of the other dom element. This just seems clunky and there must be a better/more proper way of doing this. Suggestions? Thanks

    Read the article

< Previous Page | 28 29 30 31 32 33 34 35 36 37 38 39  | Next Page >