Search Results

Search found 11216 results on 449 pages for 'css'.

Page 403/449 | < Previous Page | 399 400 401 402 403 404 405 406 407 408 409 410  | Next Page >

  • AjaxControlToolkit TabContainer with weird rendering behavior

    - by sohum
    I've built a web application that contains a page that uses the AjaxControlToolkit's TabContainer/TabPanel objects. I've developed a custom stylesheet, as well. I'm developing using Visual Studio 2010. The following is the behavior of my application: VS2010 Development Server (localhost:XXXXX): Works as expected with the custom stylesheet. Local IIS: The TabContainer rendered but the stylesheet wasn't applied. I fixed this by doing a CTRL+F5. It seems that IIS caches stylesheets pretty aggressively. Remote Server: The TabContainer and TabPanel are completely hidden. Looking at the HTML, all of them have their visibility set to hidden. The way I got my files onto my remote server were as follows (I haven't yet set up WebDAV or remote publishing because the server is a Windows 7 box and as far as I am aware does not support FrontPage Extensions): The entire solution is under source code control (SVN). Checked in all pending changes (including projects, aspx files, css, AjaxControlToolkit binaries) Synced on the server. Rebuilt everything on server. Deployed to local IIS on server (which is externally accessible). Both on the local IIS on the server and the development server on the server, the TabContainers are completely hidden. Looking at the SVN status on the server project, only the "AjaxControlToolkit.dll" is under source-code control. All the locale-specific DLLs are not on the server. Could this be a potential issue? I'm not sure what's going on and would appreciate any help. Thanks!

    Read the article

  • jQuery 1.4 Dynamically created images aspect ratio incorrect in IE8 and max-width

    - by Chris
    After upgrading to jQuery 1.4, when I try to add an image to a page dynamically using jQuery 1.4 in IE8, the image will lose the correct aspect ratio. This appears to affect only IE8 (IE7 and Firefox work fine) with jQuery 1.4 (1.3.2 works fine). Including the jQuery compatability file does not fix the problem. <!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" language="javascript" type="text/javascript"></script> <!-- Switching to 1.3.2 fixes the problem --> <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" language="javascript" type="text/javascript"></script>--> <script type="text/javascript"> $(document).ready(function() { var dynImg = $('<img></img>').attr('src', 'http://www.google.com/intl/en_ALL/images/logo.gif'); $('body').append(dynImg); }); </script> <style type="text/css"> img { max-width: 5em; } </style> </head> <body></body></html>

    Read the article

  • Problem with multiple event handling in JQuery

    - by Greg
    Hi everyone, I have a strange jquery problem with multiple event handlers. What I'm trying to achieve is this: User selects some text on the page If the selection is not empty - show a context menu If user clicks somewhere else - the context menu should disappear I'm having troubles with the above i.e. sometimes the context menu appears correctly, sometimes it appears and disappears straight after user makes a selection. Please help. See the relevant parts of my code below. Also when user selects a paragraph or a word by double clicking - context menu appears and quickly disappears again. var ContextMenu = { ... show: function(e) { var z = this; if (!this.shown) { if (this.contextMenu) { this.contextMenu.css({ left: e.pageX, top: e.pageY }).slideDown('fast'); this.shown = true; } var hideHandler = function() { z.hide(this); }; $(document.body).bind("click", hideHandler); } }, hide: function(hideHandler) { if (this.contextMenu && this.shown) { this.contextMenu.slideUp('fast'); this.shown = false; $(document.body).unbind("click", hideHandler); } } }; // Context menu display logic $(document.body).bind("mousedown mouseup", function(e) { if ((window.getSelection().toString() != "") && (!ContextMenu.shown)) { ContextMenu.show(e); } });

    Read the article

  • How can I debug why this click handler never fires?

    - by tixrus
    I am going to be excrutiatingly detailed here. I am using Firefox 3.6.3 on Max OSX with Firebug 1.5.3. I have two versions of a project, one which works and one with a bug. One I downloaded and one I typed by hand. Take a guess which one doesn't work. They should be the same except that mine uses a newer version of jQuery and the files are named differently. jQuery version is not the issue. I made mine use the older jquery and I made the working one use the newer jquery. Either way, mine still broke and the downloaded one still works. I've busted my eyes trying to see how these projects are different. The only thing I don't want to do is copy the working code to the busted code because I need to be able to figure this stuff out when it is my own unique code causing similar issues. There are no errors that I can see in Firebug in my code, in fact, 2/3 of it works just fine. just the second button does nothing. So I wanted to step through. These are always eyeball errors and I really suck at seeing them. I put it on a public server. http://colleenweb.com/jqtests/ex71.html And I want to debug ex71.js If you firebug the working one and set a break point at line 13 in ex71.js the variable json has the expected values when you click on the second button. But If you firebug this one, it never gets there. I've been over the html and all the names of everything seem to match up. I also wonder why the buttons aren't right justified but that's a css thing. Please tell me what I'm missing, and more importantly, what tool/technique I could use to find these types of bugs.

    Read the article

  • Adding multiple star rating widgets to one page

    - by diglettpotato
    I am using this jQuery plugin for star ratings: http://orkans-tmp.22web.net/star_rating/ Everything is going great, including using AJAX, etc. The problem is that I need to have many per page and can't quite figure out how to work with the selectors to achieve this. I think this is probably very easy for someone who knows their jQuery... Here's some code below... There are multiple kids per page, and I need one rating widget for each kid. I can set up each #rat to be unique with a kid attached to it, like #1rat, #2rat, etc. But then how would I set up the function to be run on each of them independently? <script type="text/javascript"> $(function(){ var kidval=1; //this needs to be setup for each kid... not just 1 var uidval=1; $('#rat').children().not("select, #rating_title").hide(); var $caption = $('<div id="caption"/>'); $('#rat').stars({ inputType: "select", oneVoteOnly: false, callback: function(ui, type, value) { $("#"+kidval+"messages").text("Saving...").fadeIn(30); $.post("vote.php", {rate: value, kid: kidval, uid: uidval}, function(json) { $("#"+kidval+"messages").text("Average"); ui.select(Math.round(json.avg)); $caption.text(" (" + json.votes + " votes, " + json.avg + " avg)"); $("#"+kidval+"messages").text("Rated " + value + " Thanks!").stop().css("opacity", 1).fadeIn(30); setTimeout(function(){ $("#"+kidval+"messages").fadeOut(1000) }, 2000); }, "json"); } }); $('#rat').stars("selectID", -1); $caption.appendTo(#rat); $('<div id="'+kidval+'messages"/>').appendTo(#rat); });

    Read the article

  • Problem with Tapestry palette's arrow icons in IE8

    - by JellyHead
    I'm using Tapestry to create pages for a web app, and have been using the palette component to add/delete items to/from a group. The page looks great in Firefox (Tapestry seems biased towards Firefox), but my customers will all be using Internet Explorer (any versions from 6, 7, & 8) and in IE8, the disabled arrow buttons look awful. In Firefox, they are faded, using an opacity setting of 25%, but this doesn't work in IE8 and instead you get a faded image with an ugly black border around the image. In tapestry-core's stylesheet (default.css), you have the following for a disabled arrow button. DIV.t-palette-controls BUTTON[disabled] IMG { filter: alpha(opacity = 25); -moz-opacity: .25; } These are clearly out of date, as -moz-opacity is no longer supported by Firefox (use opacity: 25 instead). The problem is with filter: "alpha(opacity = 25);". If I remove this, the arrows look fine in IE8, but they are not faded. I got the magic instruction: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; from various websites, but putting this in does not work either - the arrow icons are ugly again. The icon itself (distributed with Tapestry) just seems to be a regular PNG, but I'm not an expert on image formats, so maybe there's a problem there? Anyone else had this problem?

    Read the article

  • javascript: detect if XP or Classic windows theme is enabled

    - by mkoryak
    Is there any way to detect which windows XP theme is in use? I suspect that there is no specific api call you can make, but you may be able to figure it out by checking something on some DOM element, ie feature detection. Another question: does the classic theme even exist on windows vista or windows 7? edit - this is my solution: function isXpTheme() { var rgb; var map = { "rgb(212,208,200)" : false, "rgb(236,233,216)" : true }; var $elem = $("<button>"); $elem.css("backgroundColor", "ButtonFace"); $("body").append($elem); var elem = $elem.get(0); if (document.defaultView && document.defaultView.getComputedStyle) { s = document.defaultView.getComputedStyle(elem, ""); rgb = s && s.getPropertyValue("background-color"); } else if (elem.currentStyle) { rgb = (function (el) { // get a rgb based color on IE var oRG =document.body.createTextRange(); oRG.moveToElementText(el); var iClr=oRG.queryCommandValue("BackColor"); return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+ ((iClr & 0xFF0000)>>16)+")"; })(elem); } else if (elem.style["backgroundColor"]) { rgb = elem.style["backgroundColor"]; } else { rgb = null; } $elem.remove(); rgb = rgb.replace(/[ ]+/g,"") if(rgb){; return map[rgb]; } } Next step is to figure out what this function returns on non-xp machines and/or figure out how to detect windows boxes. I have tested this in windows XP only, so vista and windows 7 might give different color values, it should be easy to add though. Here is a demo page of this in action: http://programmingdrunk.com/current-projects/isXpTheme/

    Read the article

  • ResolveUrl Problem in Master Page

    - by Tarik
    Okay, I know it is weird but when I put this code between <head runat="server"></head> in master.page, this is how it renders into: <link id="ctl00_Link1" rel="shortcut icon" href="../%3C%25%20ResolveUrl(%22~/Resources/Pictures/Shared/Misc/favicon.ico%22);%20%25%3E" type="image/x-icon" /> It doesn't see something asp.net needs to take care of. This is the original code : <link id="Link1" rel="shortcut icon" href='<%=ResolveUrl("~/Resources/Pictures/Shared/Misc/favicon.ico") %>' type="image/x-icon" runat="server" /> Basically Asp.Net doesn't take care of the code below and renders as a normal html. How can I get over this problem? Thanks in advance... Edit and Resolved Okay people, there is no way for doing this. I've finally figured out because ResolveUrl or ResolveClientUrl is only working for these below : @import '<%= ResolveUrl("~/Resources/Styles/MainMaster/MainDesign.css") %>'; <script src='Resources/Scripts/Libraries/jquery-1.4.2.js' type="text/javascript"</script> it is too literal for link so you need to put link elements in body tag like : <body> <link id="iconOne" rel="shortcut icon" type="image/x-icon" href="Resources/Pictures/Shared/Misc/favicon.ico"/> <link id="iconTwo" rel="icon" href='Resources/Pictures/Shared/Misc/favicon.ico' type="image/ico" /> </body>

    Read the article

  • Alternating table row colors in freemarker

    - by itsadok
    What's a good, simple way to have alternate row coloring with freemarker? Is this really the best way? <#assign row=0> <#list items as item> <#if (row % 2) == 0> <#assign bgcolor="green"> <#else> <#assign bgcolor="red"> </#if> <tr style='background-color: ${bgcolor}'><td>${item}</td></tr> <#assign row = row + 1> </#list> I tried doing this: <#assign row=0> <#list items as item> <tr style='background-color: ${(row % 2) == 0 ? "green" : "blue"}'><td>${item}</td></tr> <#assign row = row + 1> </#list> But apparently you can't user the ternary operator in there. Note: I guess I should have mentioned it earlier, but I can't use css classes or javascript, since this HTML is going into an email message.

    Read the article

  • jQuery .load() XHTML issue

    - by Urfe
    I am having some strange problems loading content from another XHTML page via jQuery. When the second page I try to load from is served as XHTML I get the below error. I don't know if it helps but both documents validate when I get the error. Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7 Currently the header on the second page I load from is: <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="language" content="en" /> <title>some title</title> <!-- CSS & Javascript included here --> </head> The content type is set as: application/xhtml+xml;charset=iso-8859-1 Interestingly, when I remove all the XHTML stuff from the header and stop setting the content type the error does not occur and everything works great. The load process currently looks like the below. It works fine when everything is plain HTML. $('#overpage').find(".wrap").load(this.getTrigger().attr("href")+" #op").show(); I'm curious why the process only does not work when the second page I load from is XHTML. I don't want to serve the page as just plain HTML and am looking for advice on what I am doing wrong. Both pages validate and I'm really scratching my head here. Many thanks!

    Read the article

  • Simple list based output instead of style and javascript ridden ASP.net webforms menu

    - by Mike
    Hi All, Is there a way (or component i could use) to output a simple menu. I just need it output as a list, like you would use for a simple superfish menu. I've looked at the menu control and cssadapters (css friendly) which kind of works, except there is a lot of styles and javascript output with the menu which is destroying the look. If I can't find something that outputs a clean list, my next option is to craft some jquery to delete these styles. This is not my preferred option. If you have a better idea, please let me know. Just something that looks like this: <ul> Main Menu <li> hi </li> <li> second menu <ul> <li> <a href="hi.aspx"> in second menu </a></li> <li> <a href="rabbits.aspx"> hi there </a></li> </ul> </li> </ul> Thanks.

    Read the article

  • Starting out Silverlight 4 design

    - by Fermin
    I come from mainly a web development background (ASP.NET, ASP.NET MVC, XHTML, CSS etc) but have been tasked with creating/designing a Silverlight application. The application is utilising Bing Maps control for Silverlight, this will be contained in a user control and will be the 'main' screen in the system. There will be numerous other user controls on the form that will be used to choose/filter/sort/order the data on the map. I think of it like Visual Studio: the Bing Maps will be like the code editor window and the other controls will be like Solutions Explorer, Find Results etc. (although a lot less of them!) I have read up and I'm comfortable with the data side (RIA-Services) of the application. I've (kinda) got my head around databinding and using a view model to present data and keep the code behind file lite. What I do need some help on is UI design/navigation framework, specifically 2 aspects: How do I best implement a fluid design so that the various user controls which filter the map data can be resized/pinned/unpinned (for example, like the Solution Explorer in VS)? I made a test using a Grid with a GridSplitter control, is this the best way? Would it be best to create a Grid/Gridsplitter with Navigation Frames inside the grid to load the content? Since I have multiple user controls that basically use the same set of data, should I set the dataContext at the highest possible level (e.g. if using a grid with multiple frames, at the Grid level?). Any help, tips, links etc. will be very much appreciated!

    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

  • Internet explorer only executing function inside jQuery ajax success response once even though there

    - by user249950
    Hi, I have a function that uses jQuery.load() to call in 3 snippets of forms from different pages and then on the success text status it tries to load a colour picker: $(document).ready(function() { function ajax_form(putloadingboxhere, putsnippethere, snippeturl) { $(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest, ) { if (textStatus == "success") { alert('One') $("input.pickcolor").ColorPicker({ onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onSubmit: function(hsb, hex, rgb, el) { $(el).val(hex); $(el).ColorPickerHide(); $(el).siblings('.colorpreview').css('background-color', '#' + hex); }, onBeforeShow: function () { $(this).ColorPickerSetColor(this.value); } }) .bind('keyup', function(){ $(this).ColorPickerSetColor(this.value); }); alert('Two') } if (textStatus == "error") { // Show error message } }); } ajax_form('tab_box', '#formone', 'snippet_one.htm #snippet'); ajax_form('tab_box', '#formtwo', 'snippet_two_copy.htm #snippet'); ajax_form('tab_box', '#formthree', 'snippet_three.htm #snippet'); }); It works fine in Firefox and Safari but (surprise, surprise) IE has a problem with it. I have added an alert to see what is going on before and after one of the functions. FF & Safari & IE8: Alert 'one' and Alert 'two' appear three times as expected and colour picker appears. IE6 & 7: Alert 'one' shows three times and colour picker does not appear. Any help would be great! Cheers. EDIT The line IE is referring to when it throws this error: 'Error: Object doesn't support this property or method.' is: $('input.pickcolor').ColorPicker Anyone got any insights? Thanks

    Read the article

  • User Control SiteMap Provider Rendering Error

    - by Serexx
    I have created a Custom Server Control that renders the SiteMap as a pure UL for CSS styling. At run-time it renders properly but in VS2008 Design View VS shows this error: Error Rendering Control - menuMainAn unhandled exception has occurred. The provider 'AspNetXmlSiteMapProvider' specified for the defaultProvider does not exist in the providers collection. I have 'AspNetXmlSiteMapProvider' specified in web.config as per here : link text While I am happy that the code runs properly, the Designer error is bothersome if the underlying issue might cause the code to break in some circumstances so I need to understand what is going on... The code explicitly references the sitemap in the Render Method with : int level = 1; string ul = string.Format("<div class='{0}' id='{1}'>{2}</div>", CssClassName, this.ID.ToString(), EnumerateNodesRecursive(SiteMap.RootNode, level)); output.Write(ul); and the recursive method called referrences SiteMap.CurrentNode. Otherwise there are no explicit sitemap references in the code. Does anyone have any ideas why Deisgner is complaining?

    Read the article

  • Regex to remove conditional comments

    - by cnu
    I want a regex which can match conditional comments in a HTML source page so I can remove only those. I want to preserve the regular comments. I would also like to avoid using the .*? notation if possible. The text is foo <!--[if IE]> <style type="text/css"> ul.menu ul li{ font-size: 10px; font-weight:normal; padding-top:0px; } </style> <![endif]--> bar and I want to remove everything in <!--[if IE]> and <![endif]--> EDIT: It is because of BeautifulSoup I want to remove these tags. BeautifulSoup fails to parse and gives an incomplete source EDIT2: [if IE] isn't the only condition. There are lots more and I don't have any list of all possible combinations. EDIT3: Vinko Vrsalovic's solution works, but the actual problem why beautifulsoup failed was because of a rogue comment within the conditional comment. Like <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix_253168.js"></script><!--png fix for IE--> <![endif]--> Notice the <!--png fix for IE--> comment? Though my problem was solve, I would love to get a regex solution for this.

    Read the article

  • Get the accordion style for non-accordion elements

    - by SK.
    Hi, I am completely new in jQuery UI's CSS styles so please bear with me. I have to make a list of contact people. <div id="accordion"> <h3><a href="#">George Foo</a></h3> <div> some information </div> <h3><a href="#">Michelle Bar</a></h3> <div> some information </div> <h3><a href="#">Bill Wind</a></h3> <div> some information </div> </div> At first, I thought using the accordion style. However, usage showed me that opening more than one contact might be interesting as well. So I read the note on the bottom of the accordion page to use this instead of accordion: From page: jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); }); My problem is that it doesn't look like accordion (smoothness style). I suppose I am not putting the accordion and head class at the right place, but as of now the names look like default links. How can I have the same look for the headers as the accordion effect, without using accordion? I tried searching around but from what I found that specific problem is not much discussed. Thanks.

    Read the article

  • Jquery Flexslider - can't see navigational images (manualControl)

    - by Kim Thomas
    I've spent a lot of time looking at the post on 3/13/12 re: manual controls, but isn't getting me all the way there...probably because I don't know jquery. Sorry, newbie on board. I'm trying to get the right/left arrows to show, as well as the 1, 2, 3...at the bottom. They are there, I see the lists on Firebug, just don't know how to add them to the "hook" (?) so they appear. Here is the code I have in header: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", slideshow: false, controlNav: true, manualControls: ".flex-control-nav li a", controlsContainer: ".flex-container" }); }); </script> Here is my html: <div class="flex-container"> <div class="flexslider"> <ul class="slides"> <li><img src="images/tah_home.jpg" alt="taylor art house home page" width="600" height="320"/> <p class="flex-caption">Taylor Art House Home Page</p></li> <li><img src="images/tah_blog.jpg" alt="taylor art house blog page" width="600" height="320" /> <p class="flex-caption">We created a blog that fits seemlessly into Taylor Art House's look</p></li> <li><img src="images/tah_artwork_page.jpg" alt="taylor art house art page" width="600" height="320" /> <p class="flex-caption">One of Taylor Art House's gallery pages, using a Wordpress plugin</p></li> <li><img src="images/tah_arch_portfolio.jpg" alt="jon taylor architecture portfolio page" width="600" height="320" /> <p class="flex-caption">We created links to toggle from TAH to Jon Taylor Architecture</p></li> </ul> </div><!--end flexsider--> </div><!--end flex-container--> Here is the Flexslider CSS: /* * jQuery FlexSlider v1.8 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider { width: 100%; margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { max-width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme *********************************/ .flexslider { width: 600px; background: #fff; border: 4px solid #999; position: relative; margin: 30px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container { zoom: 1; position: relative; margin-left:100px; } /* Caption style */ /* IE rgba() hack */ .flex-caption { background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1; } .flex-caption { width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px; } /* Direction Nav */ .flex-direction-nav { height: 0; } .flex-direction-nav li a { width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em; } .flex-direction-nav li .next { background-position: -52px 0; right: -21px; } .flex-direction-nav li .prev { left: -20px; } .flex-direction-nav li .disabled { opacity: .3; filter:alpha(opacity=30); cursor: default; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -30px; text-align: center; } .flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline; } .flex-control-nav li:first-child { margin: 0; } .flex-control-nav li a { width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em; } .flex-control-nav li a:hover { background-position: 0 -13px; } .flex-control-nav li a.active { background-position: 0 -26px; cursor: default; } Here is how it appears in Firebug: <div class="flex-container"> <div class="flexslider" style="overflow: hidden;"> <ul class="slides" style="width: 1200%; margin-left: -1800px;"> <li class="clone" style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li class="clone" style="width: 600px; float: left; display: block;"> </ul> </div> <ol class="flex-control-nav"> <li> <a class="">1</a> </li> <li> <li> <li> </ol> <ul class="flex-direction-nav"> <li> <a class="prev" href="#">Previous</a> </li> <li> <a class="next" href="#">Next</a> </li> </ul> </div> Finally, here is a link to the jsFiddle file (I saw someone wanted that in other flexslider post): http://jsfiddle.net/kthms/Wxmsp/ Link to page: http://www.kajortdesigns.com/tah.php I've tried every combo of class from the CSS in the manualControl: "", but I'm just guessing. If anyone can help this newbie out, I would be very appreciative. Explicit instructions are always appreciated.

    Read the article

  • Using {% url ??? %} in django templates

    - by user563247
    I have looked a lot on google for answers of how to use the 'url' tag in templates only to find many responses saying 'You just insert it into your template and point it at the view you want the url for'. Well no joy for me :( I have tried every permutation possible and have resorted to posting here as a last resort. So here it is. My urls.py looks like this: from django.conf.urls.defaults import * from login.views import * from mainapp.views import * import settings # Uncomment the next two lines to enable the admin: from django.contrib import admin admin.autodiscover() urlpatterns = patterns('', # Example: # (r'^weclaim/', include('weclaim.foo.urls')), (r'^login/', login_view), (r'^logout/', logout_view), ('^$', main_view), # Uncomment the admin/doc line below and add 'django.contrib.admindocs' # to INSTALLED_APPS to enable admin documentation: # (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: (r'^admin/', include(admin.site.urls)), #(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': '/home/arthur/Software/django/weclaim/templates/static'}), (r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}), ) My 'views.py' in my 'login' directory looks like: from django.shortcuts import render_to_response, redirect from django.template import RequestContext from django.contrib import auth def login_view(request): if request.method == 'POST': uname = request.POST.get('username', '') psword = request.POST.get('password', '') user = auth.authenticate(username=uname, password=psword) # if the user logs in and is active if user is not None and user.is_active: auth.login(request, user) return render_to_response('main/main.html', {}, context_instance=RequestContext(request)) #return redirect(main_view) else: return render_to_response('loginpage.html', {'box_width': '402', 'login_failed': '1',}, context_instance=RequestContext(request)) else: return render_to_response('loginpage.html', {'box_width': '400',}, context_instance=RequestContext(request)) def logout_view(request): auth.logout(request) return render_to_response('loginpage.html', {'box_width': '402', 'logged_out': '1',}, context_instance=RequestContext(request)) and finally the main.html to which the login_view points looks like: <html> <body> test! <a href="{% url logout_view %}">logout</a> </body> </html> So why do I get 'NoReverseMatch' every time? *(on a slightly different note I had to use 'context_instance=RequestContext(request)' at the end of all my render-to-response's because otherwise it would not recognise {{ MEDIA_URL }} in my templates and I couldn't reference any css or js files. I'm not to sure why this is. Doesn't seem right to me)*

    Read the article

  • WordPress > Optimizing a query to show recent posts with a "View All" link when postcount exceeds ma

    - by Scott B
    I have a setting in my theme that allows the site owner to set the maximum number of posts ($maxPosts) to display in a "Recent Posts" menu. I'm using a custom script to generate the recent posts (because the Recent Posts widget does not highlight the current page, which I need for my css). My menu also is set up to display a "View All" link below the post listing, but only if the actual post count is $maxposts I'm trying to work out the best method for getting the post count and comparing it to $maxposts in order to determine whether or not to show a "View All" link. I'm sure there's probably a better way, but here's my code. I'm looking to optimize it to support very large post counts... $cat=get_cat_ID('excludeFromRecentPosts'); $catHidden=get_cat_ID('hidden'); $myquery = new WP_Query(); $myquery->query(array( 'cat' => "-$cat,-$catHidden", 'post_not_in' => get_option('sticky_posts') )); $myrecentpostscount = $myquery->found_posts; if ($myrecentpostscount > 0) { //show the menu if ($myrecentpostscount > $maxPosts) { //show "View All" link } } I really only need to determine if the total post count from the query is greater than the maxPost setting in order to determine whether to show the "View All" link, so I'm wondering if, in the case there are thousands of posts matching the criteria, to avoid performance issues, I don't need to get a count of all of them. I just need to count up until the point of maxPosts + 1, and that's where I'm struggling a bit because the user could elect to make maxPosts = -1 which means they want to show all posts. But this would be impractical, so I would probably set a upper limit of 20...

    Read the article

  • jQuery How do you get an image to fade in on load?

    - by Cool Hand Luke UK
    All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can't managed to fadeIn on load please help. Sorry if this question has already been answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me. Thanks. Code: <script type="text/javascript"> $(function () { .load(function () { // set the image hidden by default $('#logo').hide();.fadeIn(3000); }} </script> <link rel="stylesheet" href="challenge.css"/> <title>Acme Widgets</title> </head> <body> <div id="wrapper"> <div id="header"> <img id="logo" src="logo-smaller.jpg" /> </div> <div id="nav"> navigation </div> <div id="leftCol"> left col </div> <div id="rightCol"> <div id="header2"> header 2 </div> <div id="centreCol"> body text </div> <div id="rightCol2"> right col </div> </div> <div id="footer"> footer </div> </div> </body> </html>

    Read the article

  • How to know $(window).load(); status from jquery

    - by Starx
    I have created a website loading bar using Jquery UI Progress bar, this progress bar shows the status of scripts loading. A sample is $.getScript('_int/ajax.js',function() { $("#progressinfo").html("Loading Complete ..."); $("#progressbar").progressbar({ value: 100 }); }); This progress bar is in #indexloader which is blocking the website being loaded behind, its CSS is #indexloader { z-index:100; position:fixed; top:0; left:0; background:#FFF; width:100%;height:100%; } After the progress bar reaches 100% I want to hide and remove #indexloader for that I used $("#indexloader").fadeOut("slow",function() { $("#indexloader").remove(); }); But the problem is, although the scripts have loaded, the pages are not fully loaded, I see images and other things still loading. So before fading and removing the #indexloader i want to check whether the $(window).load() has completed or not Is there a way to check this? Thanks in advance

    Read the article

  • jquery autocomplete & masterpage

    - by Caroline
    Hi everyone, first time posting here, so hello to all :-) I'm pretty new to the jQuery thing, but I got the autocomplete function running quite well on a simple aspx page. Now I wanted to use the same function on an aspx-page with a masterpage, and it doesnt work anymore. this test function works fine: $(document).ready(function () { $("[id$=AlertButton]").click(function () { alert("Welcome jQuery !"); }); }); but this simply does nothing: $(document).ready(function () { $("[id$=Suchen]").autocomplete("AutocompleteData.ashx"); }); the javascript and css files are loaded in the master page, just above the contentplaceholder. the code within the contentplaceholder looks like this: <atlas:ScriptManager id="SM1" runat="server" EnablePartialRendering="true" > <Services> <atlas:servicereference path="~/xxxxx.asmx" /> </Services> </atlas:ScriptManager> <script type="text/javascript"> $(document).ready(function () { $("[id$=Suchen]").autocomplete("AutocompleteData.ashx"); }); </script> <br /> <asp:Button ID="AlertButton" runat="server" Text="Button" /> <br /> <asp:TextBox ID="Suchen" Width="250" runat="server"></asp:TextBox> if I execute the .ashx page on its own, it fires back the expected data... I've been browsing tons of pages, but couldn't resolve the issue. I'd be glad for any input!!! Thanks alot & all the best, Caroline

    Read the article

  • jquery slide toggle divs without creating multiple classes, functions, etc... ui accordion

    - by SPE
    Greetings, based on the jquery ui accordion I'm using, I have added a slide toggle to my accordion list items. so what happens is I click on an li and a div slides down underneath to reveal more content. The issue I'm having is that I find myself having to create multiple id's to reference the slidetoggle. example of the div id css: #panel, #panel2, #panel3, #panel4, etc.... the Is there a way I can use the slide toggle without having to adding another number so it will slide? I have 50 list items I'm using: Here's a sample of the js (as you can see where I'm going with this): $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); $(".btn-slide2").click(function(){ $("#panel2").slideToggle("slow"); $(this).toggleClass("active"); return false; }); sample html: <li><div class="slide"><a href="#" class="btn-slide">One</a></div><div id="panel"></div></li> <li><div class="slide"><a href="#" class="btn-slide2">Two</a></div><div id="panel2"></div></li>

    Read the article

  • Over-enthusiastic Intellisense in VS2010 - can I tweak it?

    - by CJM
    Since I have upgraded from VS2008 to VS2010, I've been having an increasingly infuriating battle with the Intellisense. For example, when specifying CSS styles, when I press Enter to start an new line, Intellisense (appropriately) lists available Styles to me. And if I select color and then type ':', it presents a list of color presets - often helpful. However, if I type in a space (I like them for readability) or if I type '#' to enter RGB values, it selected the default Intellisense selection, in this case inherits. Another example is in an ASP.NET page - say I am concatenating strings, I type myString =, I get an Intellisense pop-up. If I type space or '"' (to enter a literal) or '.' (so select a property or method within a WITH block), the Intellisense selects the first entry in the list. I can dismiss the Intellisense pop-ups with escape but it makes it incredibly slow to code. This behaviour is different to my VS2008 set-up. I can't seem to find any way to configure Intellisense to behave differently... I really only want it to select and Intellisense entry when I type or ... at least, certainly not when I type '"' or ' ' or '.'!

    Read the article

< Previous Page | 399 400 401 402 403 404 405 406 407 408 409 410  | Next Page >