Search Results

Search found 12011 results on 481 pages for 'css floating'.

Page 475/481 | < Previous Page | 471 472 473 474 475 476 477 478 479 480 481  | Next Page >

  • PHP - not returning a count number for filled array...

    - by Phil Jackson
    Morning, this is eating me alive so Im hoping it's not something stupid, lol. $arrg = array(); if( str_word_count( $str ) > 1 ) { $input_arr = explode(' ', $str); die(print_r($input_arr)); $count = count($input_arr); die($count); above is part of a function. when i run i get; > Array ( > [0] => luke > [1] => snowden > [2] => create > [3] => develop > [4] => web > [5] => applications > [6] => sites > [7] => alse > [8] => dab > [9] => hand > [10] => design > [11] => love > [12] => helping > [13] => business > [14] => thrive > [15] => latest > [16] => industry > [17] => developer > [18] => act > [19] => designs > [20] => php > [21] => mysql > [22] => jquery > [23] => ajax > [24] => xhtml > [25] => css > [26] => de > [27] => montfont > [28] => award > [29] => advanced > [30] => programming > [31] => taught > [32] => development > [33] => years > [34] => experience > [35] => topic > [36] => fully > [37] => qualified > [38] => electrician > [39] => city > [40] => amp > [41] => guilds > [42] => level ) Which im expecting; run this however and nothing is returned!?!?! $arrg = array(); if( str_word_count( $str ) > 1 ) { $input_arr = explode(' ', $str); //die(print_r($input_arr)); $count = count($input_arr); die($count); can anyone see anything that my eyes cant?? regards, Phil

    Read the article

  • no Jquery only Javascrip fadein function with cleartype fot text

    - by Chetan
    Sorry guys.. I am not familiar with JavaScrip anymore but I need to add clear type of some thing which can make text anti-aliased in IE7 browser. My script as follow // JavaScript Document var CurrentDivIndex=0; var TimeOutValue; var btn; var TimeToFade = 1000.0; function ShowDivSlideShow() { try { if(CurrentDivIndex == 5) CurrentDivIndex=0; CurrentDivIndex++; //alert("Banner" + CurrentDivIndex); //alert(CurrentDivIndex); var Indexer=1; while(Indexer<6) { var DivToShow=document.getElementById("Banner" + Indexer); DivToShow.style.display = "none"; btn=document.getElementById("btnb" + Indexer); btn.setAttribute("class","none"); Indexer++; } var DivToShow=document.getElementById("Banner" + CurrentDivIndex); DivToShow.style.display = "block"; btn=document.getElementById("btnb" + CurrentDivIndex); btn.setAttribute("class","activeSlide"); // btn.className="activeSlide"; fadeIn(); TimeOutValue=setTimeout("ShowDivSlideShow()",6000); } catch(err) { alert(err) } } function ShowCustomDiv(CurrentDivIndexRec) { clearTimeout(TimeOutValue) CurrentDivIndex=CurrentDivIndexRec var Indexer=1; while(Indexer<6) { if(CurrentDivIndex==Indexer) { Indexer++; continue; } var DivToShow=document.getElementById("Banner" + Indexer); DivToShow.style.display = "none"; btn=document.getElementById("btnb" + Indexer); btn.setAttribute("class","none"); Indexer++; } var DivToShow=document.getElementById("Banner" + CurrentDivIndex); DivToShow.style.display = "block"; btn=document.getElementById("btnb" + CurrentDivIndex); btn.setAttribute("class","activeSlide"); btn.className="activeSlide" fadeIn(); } function ShowDivSlideShowWithTimeOut(CurrentDivIndexRec) { clearTimeout(TimeOutValue) CurrentDivIndex=CurrentDivIndexRec; var Indexer=1; while(Indexer<6) { if(CurrentDivIndex==Indexer) { Indexer++; continue; } var DivToShow=document.getElementById("Banner" + Indexer); DivToShow.style.display = "none"; btn=document.getElementById("btnb" + Indexer); btn.setAttribute("class","none"); Indexer++; } var DivToShow=document.getElementById("Banner" + CurrentDivIndexRec); DivToShow.style.display = "block"; btn=document.getElementById("btnb" + CurrentDivIndexRec); btn.setAttribute("class","activeSlide"); TimeOutValue=setTimeout("ShowDivSlideShow()",6000); } function ShowCustomDivOnClick(CurrentDivIndexRec) { clearTimeout(TimeOutValue) CurrentDivIndex=CurrentDivIndexRec; var Indexer=1; while(Indexer<6) { if(CurrentDivIndex==Indexer) { Indexer++; continue; } var DivToShow=document.getElementById("Banner" + Indexer); DivToShow.style.display = "none"; btn=document.getElementById("btnb" + Indexer); btn.setAttribute("class","none"); Indexer++; } var DivToShow=document.getElementById("Banner" + CurrentDivIndexRec); DivToShow.style.display = "block"; btn=document.getElementById("btnb" + CurrentDivIndexRec); btn.setAttribute("class","activeSlide"); fadeIn(); TimeOutValue=setTimeout("ShowDivSlideShow()",6000); } function setOpacity(level) { element=document.getElementById("Banner" + CurrentDivIndex); element.style.opacity = level; element.style.MozOpacity = level; element.style.KhtmlOpacity = level; element.style.filter = "alpha(opacity=" + (level * 100) + ");"; } var duration = 300; /* 1000 millisecond fade = 1 sec */ var steps = 10; /* number of opacity intervals */ var delay = 6000; /* 5 sec delay before fading out */ function fadeIn(){ for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + i + ")", i * duration); } // setTimeout("fadeOut()", delay); } function fadeOut() { for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + (1 - i) + ")", i * duration); } setTimeout("fadeIn()", duration); } //end of script Now I am very confused where to add : $('#slideshow').cycle({ cleartype: 1 // enable cleartype corrections }); or $('#fadingElement').fadeIn(2000, function(){ $(this).css('filter',''); }); so it will work... Please Help me...

    Read the article

  • No module named sqlalchemy when installing ckanext-viewhelpers

    - by kean23
    I'm using CKAN as my open data portal and am trying to install the ckanext-viewhelpers Extension by following the instructions at https://github.com/ckan/ckanext-viewhelpers. /usr/lib/ckan/default/src/ckanext-viewhelpers-master$ sudo python setup.py installChecking .pth file support in /usr/local/lib/python2.7/dist-packages/ /usr/bin/python -E -c pass TEST PASSED: /usr/local/lib/python2.7/dist-packages/ appears to support .pth files running bdist_egg running egg_info writing ckanext_viewhelpers.egg-info/PKG-INFO writing namespace_packages to ckanext_viewhelpers.egg-info/namespace_packages.txt writing top-level names to ckanext_viewhelpers.egg-info/top_level.txt writing dependency_links to ckanext_viewhelpers.egg-info/dependency_links.txt writing entry points to ckanext_viewhelpers.egg-info/entry_points.txt reading manifest file 'ckanext_viewhelpers.egg-info/SOURCES.txt' reading manifest template 'MANIFEST.in' writing manifest file 'ckanext_viewhelpers.egg-info/SOURCES.txt' installing library code to build/bdist.linux-x86_64/egg running install_lib running build_py creating build/bdist.linux-x86_64/egg creating build/bdist.linux-x86_64/egg/ckanext copying build/lib.linux-x86_64-2.7/ckanext/__init__.py -> build/bdist.linux-x86_64/egg/ckanext creating build/bdist.linux-x86_64/egg/ckanext/viewhelpers copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/plugin.py -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/__init__.py -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers creating build/bdist.linux-x86_64/egg/ckanext/viewhelpers/tests copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/tests/__init__.py -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/tests copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/tests/test_view.py -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/tests creating build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public creating build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public/vendor copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/public/vendor/queryStringToJSON.js -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public/vendor copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/public/resource.config -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/public/filters_form.css -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/public/filters.js -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public copying build/lib.linux-x86_64-2.7/ckanext/viewhelpers/public/filters_form.js -> build/bdist.linux-x86_64/egg/ckanext/viewhelpers/public byte-compiling build/bdist.linux-x86_64/egg/ckanext/__init__.py to __init__.pyc byte-compiling build/bdist.linux-x86_64/egg/ckanext/viewhelpers/plugin.py to plugin.pyc byte-compiling build/bdist.linux-x86_64/egg/ckanext/viewhelpers/__init__.py to __init__.pyc byte-compiling build/bdist.linux-x86_64/egg/ckanext/viewhelpers/tests/__init__.py to __init__.pyc byte-compiling build/bdist.linux-x86_64/egg/ckanext/viewhelpers/tests/test_view.py to test_view.pyc creating build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/PKG-INFO -> build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/SOURCES.txt -> build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/dependency_links.txt -> build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/entry_points.txt -> build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/namespace_packages.txt -> build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/not-zip-safe -> build/bdist.linux-x86_64/egg/EGG-INFO copying ckanext_viewhelpers.egg-info/top_level.txt -> build/bdist.linux-x86_64/egg/EGG-INFO creating 'dist/ckanext_viewhelpers-0.1-py2.7.egg' and adding 'build/bdist.linux-x86_64/egg' to it removing 'build/bdist.linux-x86_64/egg' (and everything under it) Processing ckanext_viewhelpers-0.1-py2.7.egg removing '/usr/local/lib/python2.7/dist-packages/ckanext_viewhelpers-0.1-py2.7.egg' (and everything under it) creating /usr/local/lib/python2.7/dist-packages/ckanext_viewhelpers-0.1-py2.7.egg Extracting ckanext_viewhelpers-0.1-py2.7.egg to /usr/local/lib/python2.7/dist-packages ckanext-viewhelpers 0.1 is already the active version in easy-install.pth Installed /usr/local/lib/python2.7/dist-packages/ckanext_viewhelpers-0.1-py2.7.egg Processing dependencies for ckanext-viewhelpers==0.1 Finished processing dependencies for ckanext-viewhelpers==0.1 However I am faced with this error which I could not solve after adding viewhelpers in my CKAN config file. paster serve /etc/ckan/default/development.ini Traceback (most recent call last): File "/usr/bin/paster", line 4, in <module> command.run() File "/usr/lib/python2.7/dist-packages/paste/script/command.py", line 104, in run invoke(command, command_name, options, args[1:]) File "/usr/lib/python2.7/dist-packages/paste/script/command.py", line 143, in invoke exit_code = runner.run(args) File "/usr/lib/python2.7/dist-packages/paste/script/command.py", line 238, in run result = self.command() File "/usr/lib/python2.7/dist-packages/paste/script/serve.py", line 284, in command relative_to=base, global_conf=vars) File "/usr/lib/python2.7/dist-packages/paste/script/serve.py", line 321, in loadapp **kw) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 247, in loadapp return loadobj(APP, uri, name=name, **kw) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 271, in loadobj global_conf=global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 296, in loadcontext global_conf=global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 320, in _loadconfig return loader.get_context(object_type, name, global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 454, in get_context section) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 476, in _context_from_use object_type, name=use, global_conf=global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 406, in get_context global_conf=global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 296, in loadcontext global_conf=global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 328, in _loadegg return loader.get_context(object_type, name, global_conf) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 620, in get_context object_type, name=name) File "/usr/lib/python2.7/dist-packages/paste/deploy/loadwsgi.py", line 646, in find_egg_entry_point possible.append((entry.load(), protocol, entry.name)) File "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 1989, in load entry = __import__(self.module_name, globals(),globals(), ['__name__']) File "/usr/lib/ckan/default/src/ckan/ckan/config/middleware.py", line 9, in <module> import sqlalchemy as sa ImportError: No module named sqlalchemyckanext-viewhelpers

    Read the article

  • How to replace a div container with javascript

    - by Kovu
    Hi, I must have a little design in javascript. I have a menu with 5 entrys and only 1 HTML-page. So I will have a content-div and enabled and disabled different static content in it, each menu-entry is another content. I tried with 5 divs and disable 4 of them and enable 1, but the element under each other means every div is like a - enabled or not, so the "content" is moving then. Hope its understandable. Here is the code so far: <html><head><title>Des Einsame-Katerchen's kleine Homepage</title> <style type="text/css"> a:link { font-weight:bold; color:blue; text-decoration:none; } a:visited { font-weight:bold; color:blue; text-decoration:none; } a:focus { font-weight:bold; color:blue; text-decoration:none; } a:hover { font-weight:bold; color:blue; text-decoration:line-through; } a:active { font-weight:bold; color:blue; text-decoration:none; } h1:focus { background-color:red; } h1:hover { background-color:silver; } h1:active { background-color:green; } </style> <script> function an(id) { document.getElementById('start').style.visibility = 'hidden'; document.getElementById('start').style.height = '0px'; document.getElementById('me').style.visibility = 'hidden'; document.getElementById('me').style.height = '0px'; document.getElementById('rpg').style.visibility = 'hidden'; document.getElementById('rpg').style.height = '0px'; document.getElementById('musik').style.visibility = 'hidden'; document.getElementById('musik').style.height = '0px'; document.getElementById('screens').style.visibility = 'hidden'; document.getElementById('screens').style.height = '0px'; document.getElementById(id).style.visibility = 'visible'; document.getElementById(id).style.height = '500px'; } </script> </head> <body style=" " > <div style="width=100%; text-align:center; border: 1px red solid; height:40px;"> <div style="float:left; width:100px;"><a href="#" OnClick="an('start')" >Startseite</a></div> <div style="float:left; width:100px;"><a href="#" OnClick="an('me')" >Über mich</a></div> <div style="float:left; width:100px;"><a href="#" OnClick="an('rpg')" >RPG-Chars</a></div> <div style="float:left; width:100px;"><a href="#" OnClick="an('musik')" >Musik</a></div> <div style="float:left; width:150px;"><a href="#" OnClick="an('screens')" >Knuddels-Screens</a></div> </div> <br> <div id="start" style="border:1px red solid; width:500px; height:500px; overflow: visible; " > a </div> <div id="me" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " > b </div> <div id="rpg" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " > c </div> <div id="musik" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " > d </div> <div id="screens" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " > e </div> </body>

    Read the article

  • jQuery Cycle Plugin - Content not cycling

    - by fmz
    I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have the code in place, the images set, but it doesn't cycle properly. Firefox says there is a problem with the following code: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' }); }); </script> Here is the html: <div class="slideshow"> <div id="mainImg-1" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number One.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-2" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Two.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-3" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number three.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> <div id="mainImg-4" class="slide"> <div class="quote"> <h2>Building Big Relationships with Small Business.</h2> <p>&ldquo;This is quote Number Fout.<br /> They are there when I need them the most.&rdquo;</p> <p><span class="author">Jane Doe &ndash; Charlotte Flower Shop</span></p> <div class="help"><a href="cb_services.html">Let Us Help You</a></div> </div> </div> Here is the CSS: .slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; } #mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; } #mainImg-1 .quote, #mainImg-2 .quote, #mainImg-3 .quote, #mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; } Before you go off and say, "hey, those images are all the same". You are right, the images are all the same right now, but the text should be rotating as well and there is a slight difference there. In addition, the fade should still show up. Anyway, you can see the dev page here: http://173.201.163.213/projectpath/first_trust/index.html I would appreciate some help to get this cycling through as it should. Thanks!

    Read the article

  • Returning Json object from controller action to jQuery

    - by PsychoCoder
    I'm attempting to get this working properly (2 days now). I'm working on a log in where I'm calling the controller action from jQuery, passing it a JSON object (utilizing json2.js) and returning a Json object from the controller. I'm able to call the action fine, but instead of being able to put the response where I want it it just opens a new window with this printed on the screen: {"Message":"Invalid username/password combination"} And the URL looks like http://localhost:13719/Account/LogOn so instead of calling the action and not reloading the page it's taking the user to the controller, which isn't good. So now for some code, first the controller code [HttpPost] public ActionResult LogOn(LogOnModel model, string returnUrl = "") { if (ModelState.IsValid) { var login = ObjectFactory.GetInstance<IRepository<PhotographerLogin>>(); var user = login.FindOne(x => x.Login == model.Username && x.Pwd == model.Password); if (user == null) return Json(new FailedLoginViewModel { Message = "Invalid username/password combination" }); else { if (!string.IsNullOrEmpty(returnUrl)) return Redirect(returnUrl); else return RedirectToAction("Index", "Home"); } } return RedirectToAction("Index", "Home"); } And the jQuery code $("#signin_submit").click(function () { var login = getLogin(); $.ajax({ type: "POST", url: "../Account/LogOn", data: JSON.stringify(login), dataType: 'json', contentType: 'application/json; charset=utf-8', error: function (xhr) { $("#message").text(xhr.statusText); }, success: function (result) { } }); }); function getLogin() { var un = $("#username").val(); var pwd = $("#password").val(); var rememberMe = $("#rememberme").val(); return (un == "") ? null : { Username: un, Password: pwd, RememberMe: rememberMe }; } In case you need to see the actual login form here that is as well <fieldset id="signin_menu"> <div> <span id="message"></span> </div> <% Html.EnableClientValidation(); %> <% using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { @id = "signin" })) {%> <% ViewContext.FormContext.ValidationSummaryId = "valLogOnContainer"; %> <%= Html.LabelFor(m => m.Username) %> <%= Html.TextBoxFor(m => m.Username, new { @class = "inputbox", @tabindex = "4", @id = "username" })%><%= Html.ValidationMessageFor(m => m.Username, "*")%> <p> <%= Html.LabelFor(m=>m.Password) %> <%= Html.PasswordFor(m => m.Password, new { @class = "inputbox", @tabindex = "5", @id = "password" })%><%= Html.ValidationMessageFor(m => m.Password, "*")%> </p> <p class="remember"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"/> <%= Html.CheckBoxFor(m => m.RememberMe, new { @class = "inputbox", @tabindex = "7", @id = "rememberme" })%> <%= Html.LabelFor(m => m.RememberMe) %> <p class="forgot"> <a href="#" id="forgot_password_link" title="Click here to reset your password.">Forgot your password?</a> </p> <p class="forgot-username"> <a href="#" id="forgot_username_link" title="Fogot your login name? We can help with that">Forgot your username?</a> </p> </p> <%= Html.ValidationSummaryJQuery("Please fix the following errors.", new Dictionary<string, object> { { "id", "valLogOnContainer" } })%> <% } %> </fieldset> The login form is loaded on the main page with <% Html.RenderPartial("LogonControl");%> Not sure if that has any bearing on this or not but thought I'd mention it. EDIT: The login form is loaded similar to the Twitter login, click a link and the form loads with the help of jQuery & CSS

    Read the article

  • how do I use html block snippets with dynamic content inside a django template that extends another

    - by stackoverflowusername
    Hi. Can someone please help me figure out a way to achieve the following (see snippets below) in Django templates? I know that you cannot use more than one extends, but I am new to django and I do not know the proper syntax for something like this. I want to be able to do this so that I can use my nested div layout for css reasons without having to type it like that each time and risking a typo. In words, I want to be able to have a page template extend my base.html file and then use html snippets of dynamic template content (i.e. template for loops or other template logic devices, not just a context variable I set from my view controller). ------------------------------------------------------------ base.html ------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>{% block title %}Title{% endblock %}</title> </head> <body> <div class="wrapper"> <div class="header"> This is the common header </div> <div class="nav"> This is the common nav </div> {% if messages %} <div class="messages"> <ul> {% for message in messages %} <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li> {% endfor %} </ul> </div> {% endif %} <div class="content"> {% block content %}Page Content{% endblock %} </div> <div class="footer"> This is the common footer </div> </div> </body> </html> ------------------------------------------------------------ columnlayout2.html ------------------------------------------------------------ <div class="twocol container2"> <div class="container1"> <div class="col1"> {% block twocol_col1 %}{% endblock %} </div> <div class="col2"> {% block twocol_col2 %}{% endblock %} </div> </div> </div> ------------------------------------------------------------ columnlayout3.html ------------------------------------------------------------ <div class="threecol container3"> <div class="container2"> <div class="container1"> <div class="col1"> {% block threecol_col1 %}{% endblock %} </div> <div class="col2"> {% block threecol_col2 %}{% endblock %} </div> <div class="col3"> {% block threecol_col3 %}{% endblock %} </div> </div> </div> </div> ------------------------------------------------------------ page.html ------------------------------------------------------------ {% extends "base.html" %} {% block content %} {% extends "columnlayout2.html" %} {% block twocol_col1 %}twocolumn column 1{% endblock %} {% block twocol_col2 %}twocolumn column 2{% endblock %} {% extends "columnlayout3.html" %} {% block threecol_col1 %}threecol column 1{% endblock %} {% block threecol_col2 %}threecol column 2{% endblock %} {% block threecol_col3 %}threecol column 3{% endblock %} {% endblock %} ------------------------------------------------------------ page.html output ------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Title</title> </head> <body> <div class="wrapper"> <div class="header"> This is the common header </div> <div class="nav"> This is the common nav </div> <div class="content"> <div class="twocol container2"> <div class="container1"> <div class="col1"> twocolumn column 1 </div> <div class="col2"> twocolumn column 2 </div> </div> </div> <div class="threecol container3"> <div class="container2"> <div class="container1"> <div class="col1"> threecol column 1 </div> <div class="col2"> threecol column 2 </div> <div class="col3"> threecol column 3 </div> </div> </div> </div> </div> <div class="footer"> This is the common footer </div> </div> </body> </html>

    Read the article

  • on click checkbox set input attr

    - by Tommy Arnold
    html form with 4 columns the first 2 columns are the sizes inside input boxes with disabled ='disabled', when they click radio button to select a size a checkbox appears, when they click that checkbox I would like to change the class and disabled attr of the inputs on that table row to allow them to edit the input box <table width="388" border="1" id="product1"> <tr> <td width="100">Width</td> <td width="100">Height</td> <td width="48">Price</td> <td width="65">Select</td> </tr> <tr> <td><input type="text" disabled='disabled'value="200"/><span> CMS</span></td> <td><input disabled='disabled'type="text" value="500"/><span> CMS</span></td> <td>£50.00</td> <td><input type="radio" name="product1" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1000</td> <td>£100.00</td> <td><input type="radio" name="product1" value="size2" /> Customise<input disabled='disabled' type="checkbox" name="custom[size2]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1500</td> <td>£150</td> <td><input type="radio" name="product1" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td> </tr> </table> <table width="288" border="1" id="product2"> <tr> <td width="72">Width</td> <td width="75">Height</td> <td width="48">Price</td> <td width="65">&nbsp;</td> </tr> <tr> <td>200</td> <td>500</td> <td>£50.00</td> <td><input type="radio" name="product2" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1000</td> <td>£100.00</td> <td><input type="radio" name="product2" value="size2" /> Customise<input type="checkbox" name="custom[size2]" class="custombox" value="1"/></td> </tr> <tr> <td>200</td> <td>1500</td> <td>£150</td> <td><input type="radio" name="product2" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td> </tr> <table> CSS input[type=checkbox] { display: none; } input[type=checkbox].shown { display: inline; } input .edit{ border:1px solid red; } input[disabled='disabled'] { border:0px; width:60px; padding:5px; float:left; background:#fff; } span{float:left; width:30px; padding:5px;} Jquery $("body :checkbox").hide(); // The most obvious way is to set radio-button click handlers for each table separatly: $("#product1 :radio").click(function() { $("#product1 :checkbox").hide(); $("#product1 .cbox").hide(); $(this).parent().children(":checkbox").show(); $(this).parent().children(".cbox").show(); }); $("#product2 :radio").click(function() { $("#product2 :checkbox").hide(); $("#product2 .cbox").hide(); $(this).parent().children(":checkbox").show(); $(this).parent().children(".cbox").show(); }); This is what I thought but its not working $("#product1 :checkbox").click(function(){ $(this).parent("tr").children("td :input").attr('disabled',''); $(this).parent("tr").children("td :input").toggleClass(edit); }); $("#product2 :checkbox").click(function(){ $(this).parent("tr").children("td :input").attr('disabled',''); $(this).parent("tr").children("td :input").toggleClass(edit); }); Thanks in advance for any help.

    Read the article

  • Fetch a specific tag from Rally in order to compute a value in another field

    - by 4jas
    I'm extremely new to Rally development so my question may sound dumb (but couldn't find how to do it from rally's help or from previous posts here) :) I've started from the rally freeform grid example - my purpose is to implement a Business Value calculator: I fill the score field with a 5-digit figure where each number is a score in the 1-5 range. Then I compute a business value as the result of a calculation, where each number is weighted by a preset weight. I can sort my stories by Business Value to help me prioritize my backlog: that's the first step, and it works. Now what I want to do is to make my freeform grid editable: I am extracting each of my digits as a separate column, but those columns are display-only. How can I turn them into something editable? What I want to do of course is update back the score field based on the values input in each custom column. Here's an example: I have a record with score "15254", which means Business Value criteria 1 scores 1 out of 5, Business Value criteria 2 scores 5 out of 5, and so on... In the end my Business Value is computed as "1*1 + 5*2 + 2*3 + 5*4 + 4*5 = 57". So far this is the part that works. Now let's say I found that the third criteria should not score 2 but 3, I want to be able to edit the value in the corresponding column and have my score field updated to "15354", and my Business Value to display 60 instead of 57. Here is my current code, I'll be really grateful if you can help me with turning that grid into something editable :) <!--Include SDK--> <script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p2/sdk-debug.js"></script> <!--App code--> <script type="text/javascript"> Rally.onReady(function() { Ext.define('BVApp', { extend: 'Rally.app.App', componentCls: 'app', launch: function() { Ext.create('Rally.data.WsapiDataStore', { model: 'UserStory', autoLoad: true, listeners: { load: this._onDataLoaded, scope: this } }); }, _onDataLoaded: function(store, data) { var records = []; var li_score; var li_bv1, li_bv2, li_bv3, li_bv4, li_bv5, li_bvtotal; var weights = new Array(1, 2, 3, 4, 5); Ext.Array.each(data, function(record) { //Let's fetch score and compute the business values... li_score = record.get('Score'); if (li_score) { li_bv1 = li_score.toString().substring(0,1); li_bv2 = li_score.toString().substring(1,2); li_bv3 = li_score.toString().substring(2,3); li_bv4 = li_score.toString().substring(3,4); li_bv5 = li_score.toString().substring(4,5); li_bvtotal = li_bv1*weights[0] + li_bv2*weights[1] + li_bv3*weights[2] + li_bv4*weights[3] + li_bv5*weights[4]; } records.push({ FormattedID: record.get('FormattedID'), ref: record.get('_ref'), Name: record.get('Name'), Score: record.get('Score'), Bv1: li_bv1, Bv2: li_bv2, Bv3: li_bv3, Bv4: li_bv4, Bv5: li_bv5, BvTotal: li_bvtotal }); }); this.add({ xtype: 'rallygrid', store: Ext.create('Rally.data.custom.Store', { data: records, pageSize: 5 }), columnCfgs: [ { text: 'FormattedID', dataIndex: 'FormattedID' }, { text: 'ref', dataIndex: 'ref' }, { text: 'Name', dataIndex: 'Name', flex: 1 }, { text: 'Score', dataIndex: 'Score' }, { text: 'BusVal 1', dataIndex: 'Bv1' }, { text: 'BusVal 2', dataIndex: 'Bv2' }, { text: 'BusVal 3', dataIndex: 'Bv3' }, { text: 'BusVal 4', dataIndex: 'Bv4' }, { text: 'BusVal 5', dataIndex: 'Bv5' }, { text: 'BusVal Total', dataIndex: 'BvTotal' } ] }); } }); Rally.launchApp('BVApp', { name: 'Business Values App' }); var exampleHtml = '<div id="example-intro"><h1>Business Values App</h1>' + '<div>Own sample app for Business Values</div>' + '</div>'; // Default app viewport uses layout: 'fit', // so we need to insert a container into the viewport var viewport = Ext.ComponentQuery.query('viewport')[0]; var appComponent = viewport.items.getAt(0); var viewportContainerItems = [{ html: exampleHtml, border: 0 }]; //hide advanced cardboard live previews in examples for now viewportContainerItems.push({ xtype: 'container', items: [appComponent] }); viewport.remove(appComponent, false); viewport.add({ xtype: 'container', layout: 'vbox', items: viewportContainerItems }); }); </script> <!--App styles--> <style type="text/css"> .app { /* Add app styles here */ } </style>

    Read the article

  • Checkbox to Show and Hide only for the near DIV

    - by Holp
    Select all options... Then, when the user uncheck "B" and check it again, the "D" parents must be hidden. I have to do it without give then IDs. <html> <head> <title>Form</title> <style> * { font-family: Segoe UI, Verdana; font-size: 10pt; } #total { padding: 10px; position: fixed; top: 10px; left: 500px; width: 150px; height: 100px; } p { margin: 5px; } .grupo { padding: 5px 0 5px 0; } </style> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <div class="grupo"> <p class="pergunta">A) Lorem ipsum dolor sit amet, nulla nec tortor?</p> <p><label><input type="radio" name="P-1" value="R-1-1" />Sim</label></p> <p><label><input type="radio" name="P-1" value="R-1-2" />Não</label></p> </div> <div class="grupo"> <p class="pergunta"><label><input type="checkbox" name="P-2" value="R-2-3" />B) Donec libero risus, commodo vitae</label></p> <div class="dependente"> <div class="grupo"> <p class="pergunta">C) Lorem ipsum dolor sit amet, nulla nec tortor?</p> <p><label><input type="radio" name="P-3" value="R-3-1" />Morbi in orci</label></p> <p><label><input type="radio" name="P-3" value="R-3-2" />Nulla purus lacus, pulvinar vel</label></p> <p><label><input type="radio" name="P-3" value="R-3-3" />Aliquam ante</label></p> <p><label><input type="radio" name="P-3" value="R-3-4" />Suspendisse scelerisque dui nec velit</label></p> </div> <div class="grupo"> <p class="pergunta"><label><input type="checkbox" name="P-4" value="R-4-5" />D) Donec libero risus, commodo vitae</label></p> <div class="dependente"> <div class="grupo"> <p class="pergunta">E) Lorem ipsum dolor sit amet, nulla nec tortor?</p> <p><label><input type="radio" name="P-5" value="R-5-1" />Morbi in orci</label></p> <p><label><input type="radio" name="P-5" value="R-5-2" />Nulla purus lacus</label></p> </div> </div> </div> </div> </div> <div class="grupo"> <p class="pergunta">F) Lorem ipsum dolor sit amet, nulla nec tortor?</p> <p><label><input type="radio" name="P-6" value="R-6-1" />Morbi in orci</label></p> <p><label><input type="radio" name="P-6" value="R-6-2" />Nulla purus lacus, pulvinar vel</label></p> <p><label><input type="radio" name="P-6" value="R-6-3" />Aliquam ante</label></p> <p><label><input type="radio" name="P-6" value="R-6-4" />Suspendisse scelerisque dui nec velit</label></p> </div> <script type="text/javascript"> $('.dependente').hide(); $(':checkbox').click(function () { var checked = this.checked; $('.dependente:first',$(this).parents('div:first')).css('display',checked ? 'block':'none'); $('.dependente input',$(this).parents('div:first')).attr('checked', false).change(); }); </script> </body> </html>

    Read the article

  • How to make a form using ajax, onchange event, reload to SAME page

    - by user1348220
    I've been studying this for a while and I'm not sure if I'm going about this the right way because every form I setup according to examples, it doesn't do what I need. I need to setup a form that will: set session when you select from dropdown menu not reload/refresh page (i've read that using AJAX solves this) submit and stay on SAME page (confused because most AJAX examples send it to different process.php page which is supposedly "invisible" but it doesn't "stay" on the same page, it redirects. Basically, client selects quantity of 1 to 10. If they select "2"... it does NOT reload the page.. but it DOES set a session[quantity]=2. Should be simple... but do I POST to same page as form? or POST to different page and it somehow redirects? Also, one test I did it kept pasting my "echo session[quantity]" down the page like 7, 2, 3, 5, etc. etc. each time instead of replacing it. I would paste code but it's all over the place and I'm hoping for direction on which methods to use. Feel I need to start all over again. Edit: trying to add code below but can't seem to paste it properly. <? ob_start();?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php session_start(); ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Submit Form with out refreshing page Tutorial</title> <!-- JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" > $(function() { $(".submit").click(function() { var gender = $("#gender").val(); var dataString = '&gender=' + gender; if(gender=='') { $('.success').fadeOut(200).hide(); $('.error').fadeOut(200).show(); } else { $.ajax({ type: "POST", url: "join.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); } return false; }); }); </script> <style type="text/css"> body{ } .error{ color:#d12f19; font-size:12px; } .success{ color:#006600; font-size:12px; } </style> </head> <body id="public"> <div style="height:30px"></div> <div id="container"> <div style="height:30px"></div> <form method="post" name="form"> <select id="gender" name="gender"> <option value="">Gender</option> <option value="male">Male</option> <option value="female">Female</option> </select> <div> <input type="submit" value="Submit" class="submit"/> <span class="error" style="display:none"> Please Enter Valid Data</span> <span class="success" style="display:none"> Your gender is <?php echo $_SESSION['gender'];?></span> </div> </form> <div style="height:20px"></div> </div><!--container--> </body> </html> <? ob_flush(); ?> and here is my page where the POST goes called join.php (called that in example so I went with it for now) <?php session_start(); if($_POST) { $gender = $_POST['gender']; $_SESSION['gender'] = $gender; } else { } ?>

    Read the article

  • Fullscreen image with jquery on window resize?

    - by lauthiamkok
    I am trying to make fullscreen images with jquery when the window resize function is triggered. But I get this kind of result - where you can see a gap at the bottom of the image which I don't know how to fix it. the basic html, <!-- container --> <div id="container" class="container"> <div class="holder-supersize" id="supersize"> <ul class="background-supersize"> <li><a href="#"><img src="styles/images/IMG_0250.jpg" alt="" width="1000" height="667" /></a></li> <li><a href="#"><img src="styles/images/IMG_0255.jpg" alt="" width="667" height="1000" /></a></li> <li class="active"><a href="#"><img src="styles/images/IMG_0323.jpg" alt="" width="1158" height="772" /></a></li> </ul> </div> </div> <!-- container --> jquery for updating image size on window resize, $(document).ready(function(){ $(window).resize(function(){ $(".holder-supersize").each(function() { //Define image ratio & minimum dimensions var minwidth = .5*(640); var minheight = .5*(480); var ratio = 480/640; //Gather browser and current image size var imagewidth = $(this).width(); var imageheight = $(this).height(); var browserwidth = $(window).width(); var browserheight = $(window).height(); //Check for minimum dimensions if ((browserheight < minheight) && (browserwidth < minwidth)){ $(this).height(minheight); $(this).width(minwidth); } else { //When browser is taller if (browserheight > browserwidth){ imageheight = browserheight; $(this).height(browserheight); imagewidth = browserheight/ratio; $(this).width(imagewidth); if (browserwidth > imagewidth){ imagewidth = browserwidth; $(this).width(browserwidth); imageheight = browserwidth * ratio; $(this).height(imageheight); } } //When browser is wider if (browserwidth >= browserheight){ imagewidth = browserwidth; $(this).width(browserwidth); imageheight = browserwidth * ratio; $(this).height(imageheight); if (browserheight > imageheight){ imageheight = browserheight; $(this).height(browserheight); imagewidth = browserheight/ratio; $(this).width(imagewidth); } } } return false; }); }); }); CSS for supersize image /* Supersize -------------------------------------------*/ .holder-supersize { width:100%; height:100%; position:absolute; left:0; top:0; z-index:0; } .background-supersize { width:100%; height:100%; overflow:hidden; position:relative; } .background-supersize li { width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center; } .background-supersize li img { /* for image with height < width */ /**/ width:100%; height:auto; /* for image with height > width */ /* width:auto; height:100%; */ } .background-supersize li , .background-supersize a, .background-supersize img{ display:none; } .background-supersize .active, .background-supersize .active a, .background-supersize .active img{ display:inline; } This is the link at jsfiddle and this is the link to see the actual product. Any ideas what I have done wrong and how can I fix it?

    Read the article

  • HTML tables in JTextPane showing weird "form" boxes

    - by Ted
    import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JTextPane; import javax.swing.border.EmptyBorder; import javax.swing.text.Document; import javax.swing.text.html.HTMLEditorKit; import javax.swing.text.html.StyleSheet; public class htmlEditor2 extends JFrame { private JPanel contentPane; public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { public void run() { try { htmlEditor2 frame = new htmlEditor2(); frame.setVisible(true); } catch (Exception e) { e.printStackTrace(); } } }); } public htmlEditor2() { setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setBounds(100, 100, 450, 300); contentPane = new JPanel(); contentPane.setBorder(new EmptyBorder(5, 5, 5, 5)); contentPane.setLayout(new BorderLayout(0, 0)); setContentPane(contentPane); Foo f = new Foo(); f.setText("<html><body><table border=\"1\" width=\"985\" cellpadding=\"3\" cellspacing=\"0\" style=\"table-layout: fixed; border-collapse: collapse; border-width: 0px; border-color: #010101; \"><colgroup><col width=\"328\"></col> <col width=\"328\"></col> <col width=\"328\"></col> </colgroup><tr><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><font face=\"Arial\"><span style=\"font-size:8pt\">row 1</span></font></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><font face=\"Arial\"><span style=\"font-size:8pt\">row2</span></font></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><font face=\"Arial\"><span style=\"font-size:8pt\">row3</span></font></div></td></tr><tr><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td></tr><tr><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td><td align=\"left\" valign=\"top\" width=\"321\" style=\"border: solid #010101 1px; \"><div align=\"left\"><span style=\"font-size: 8pt;\">&nbsp;</span></div></td></tr></table><div align=\"left\">&nbsp;&nbsp;</div></body></html>"); contentPane.add(f); } class Foo extends JTextPane { public Foo() { super(); HTMLEditorKit kit = new HTMLEditorKit(); setEditorKit(kit); StyleSheet styleSheet = kit.getStyleSheet(); styleSheet.addRule(""); //in case I need to add a CSS Document doc = kit.createDefaultDocument(); setDocument(doc); } } } I would paste a nicely formatted version of the html, but I'm not sure how to do it on here... So yeah.. I just want to know how to get rid of those weird colgroup and col boxes in my table and how to make the table work normally! Thanks yall!

    Read the article

  • jQuery Validation plugin: prompt for override

    - by Sam Carleton
    I have a jQuery form that has validation of a sort. It is a data entry screen with two 'recommend ranges', one is 36-84, the other 50-300. The business rules call for the values to be either blank or greater than zero, but to prompt for confirmation if the values are outside of the range listed above. I have seen some other threads that talk about setting the class="cancel" on the submit button. From what I can tell, this will simply disable the validation. I need to prompt for a "do you want to continue, yes or no?" and if no stop the submit, if yes, continue. Below is an example from the book Pro jQuery. By default the top row needs to be between 10 and 20 to submit. How would you change it so that it prompts you and if you say Yes it submits, no prevents the submit: <!DOCTYPE html> <html> <head> <title>Example</title> <script src="jquery-1.7.js" type="text/javascript"></script> <script src="jquery.tmpl.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <style type="text/css"> h1 { min-width: 70px; border: thick double black; margin-left: auto; margin-right: auto; text-align: center; font-size: x-large; padding: .5em; color: darkgreen; background-image: url("border.png"); background-size: contain; margin-top: 0; } .dtable {display: table;} .drow {display: table-row;} .dcell {display: table-cell; padding: 10px;} .dcell > * {vertical-align: middle} input {width: 2em; text-align: right; border: thin solid black; padding: 2px;} label {width: 5em; padding-left: .5em; display: inline-block;} #buttonDiv {text-align: center;} #oblock {display: block; margin-left: auto; margin-right: auto; min-width: 700px; } div.errorMsg {color: red} .invalidElem {border: medium solid red} </style> <script type="text/javascript"> $(document).ready(function() { var data = [ { name: "Astor", product: "astor", stocklevel: "10", price: "2.99"}, { name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"}, { name: "Rose", product: "rose", stocklevel: "2", price: "4.99"}, { name: "Peony", product: "peony", stocklevel: "0", price: "1.50"}, { name: "Primula", product: "primula", stocklevel: "1", price: "3.12"}, { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"}, ]; var templResult = $('#flowerTmpl').tmpl(data); templResult.slice(0, 3).appendTo('#row1'); templResult.slice(3).appendTo("#row2"); $('form').validate({ highlight: function(element, errorClass) { $(element).add($(element).parent()).addClass("invalidElem"); }, unhighlight: function(element, errorClass) { $(element).add($(element).parent()).removeClass("invalidElem"); }, errorElement: "div", errorClass: "errorMsg" }); $.validator.addClassRules({ flowerValidation: { required: true, min: 0, max: 100, digits: true, } }) $('#row1 input').each(function(index, elem) { $(elem).rules("add", { min: 10, max: 20 }) }); $('input').addClass("flowerValidation").change(function(e) { $('form').validate().element($(e.target)); }); }); </script> <script id="flowerTmpl" type="text/x-jquery-tmpl"> <div class="dcell"> <img src="${product}.png"/> <label for="${product}">${name}: </label> <input name="${product}" value="0" required /> </div> </script> </head> <body> <h1>Jacqui's Flower Shop</h1> <form method="post" action="http://node.jacquisflowershop.com/order"> <div id="oblock"> <div class="dtable"> <div id="row1" class="drow"> </div> <div id="row2"class="drow"> </div> </div> </div> <div id="buttonDiv"><button type="submit">Place Order</button></div> </form> </body> </html>

    Read the article

  • List/Grid Toggle for Photo Gallery with Shadowbox

    - by InfamouslyBubbly
    so I'm new to this site, and new to jquery, and javascript as a whole really, but I have very good comprehension of HTML and CSS. For a class in school, I'm making a photo gallery webpage using the Shadowbox plugin. I have that part all down, but one of the requirements is to add some sort of user option that the user can change that will get saved in a cookie. (I haven't gotten to the cookie part yet) For my option, I decided to add a toggle that will switch the view of the page from a grid view (default) with images, to a list view of just the captions of the images. I figured out how to do that, but decided it could probably done in a much simpler fashion with the use of loops. Here is the HTML I have: <body> <div id="preferences"> <h1>My Photo Gallery</h1> <ul id="options"> <li><a href="#" id="list"><img src="media/listview.png" alt="List view"/></a></li> <li><a href="#" id="grid"><img src="media/gridview.png" alt="List view"/></a></li> </ul> </div> <div id="gallery"> <a rel="shadowbox[Gallery]" class="l1 img" href="media/img1.jpg" title="Black and White Leopard Pattern"><img src="media/thumb1.jpg" alt="Black and White Leopard Pattern"/></a> <a rel="shadowbox[Gallery]" class="l2 img" href="media/img2.jpg" title="Snow Leopard Pattern"><img src="media/thumb2.jpg" alt="Snow Leopard Pattern"/></a> <a rel="shadowbox[Gallery]" class="l3 img" href="media/img3.jpg" title="Colorful Triangle Pattern"><img src="media/thumb3.jpg" alt="Colurful Triangle Pattern"/></a> <a rel="shadowbox[Gallery]" class="l4 img" href="media/img4.jpg" title="Tie Dye Zebra Stripe Pattern"><img src="media/thumb4.jpg" alt="Tie Dye Zebra Stripe Pattern"/></a> <a rel="shadowbox[Gallery]" class="l5 img" href="media/img5.jpg" title="Blue Knitted Pattern"><img src="media/thumb5.jpg" alt="Blue Knitted Pattern"/></a> <a rel="shadowbox[Gallery]" class="l6 img" href="media/img6.jpg" title="Black and White Damask Pattern"><img src="media/thumb6.jpg" alt="Black and White Damask Pattern"/></a> <a rel="shadowbox[Gallery]" class="l7 img" href="media/img7.jpg" title="Wooden Panel Pattern"><img src="media/thumb7.jpg" alt="Wooden Panel Pattern"/></a> <a rel="shadowbox[Gallery]" class="l8 img" href="media/img8.jpg" title="Brick Pattern"><img src="media/thumb8.jpg" alt="Brick Pattern"/></a> <a rel="shadowbox[Gallery]" class="l9 img" href="media/img9.jpg" title="Watercolor Pattern"><img src="media/thumb9.jpg" alt="Watercolor Pattern"/></a> <a rel="shadowbox[Gallery]" class="l10 img" href="media/img10.jpg" title="Orange Stripe Pattern"><img src="media/thumb10.jpg" alt="Orange Stripe Pattern"/></a> <a rel="shadowbox[Gallery]" class="l11 img" href="media/img11.jpg" title="Blue Scales Pattern"><img src="media/thumb11.jpg" alt="Blue Scales Pattern"/></a> <a rel="shadowbox[Gallery]" class="l12 img" href="media/img12.jpg" title="Woven Pattern"><img src="media/thumb12.jpg" alt="Woven Pattern"/></a> </div> </body> So here is the sample that works (for the list portion anyways), but seems excessive in terms of code since I'd have to repeat for each image: $(document).ready(function(){ $( "#list" ).click(function() { $( "a.l1" ).removeClass( "img" ); $( "a.l1" ).addClass( "lst" ); $( "a.l1" ).text( $( "a.l1" ).attr( "title" ); //repeat for l1 through l12 (that`s the letter L not a 1) }); $( "#grid" ).click(function() { $( "a.l1" ).removeClass( "lst" ); $( "a.l1" ).addClass( "grid" ); //actually have no idea at all how to get this back to the original img tag other than maybe .innerHTML??? //repeat for l1 through l12 (again, that`s the letter L not a 1) }); }): And here is kinda how I'd like it (Y'know, except in a way that works) $(document).ready(function(){ var i = 1; var selcur = $( "'a.l" + i + "'" ); var title = selcur.attr( "title" ); var image = '<img src="media/thumb' + i + '.jpg" alt="' + title + '"/>'; $( "#list" ).click(function() { while (1<=12) { selcur.addClass("lst"); selcur.removeClass("img"); selcur.text( title ); i++; } i = 1; }); $( "#grid" ).click(function() { while (1<=12) { selcur.removeClass("lst"); selcur.addClass("img"); selcur.text( image ); i++; } i = 1; }); }); Please tell me how I am going about this wrong, keep in mind again I'm new to this, I appreciate any and all responses! Is there a better way to do this? I really want to keep it simple.

    Read the article

  • trying to make an accordion menu from a list - jquery indexhibit

    - by orionrush
    Hello - Im teaching my self javascript & jquery so this might be a bit of a low brow question or entirely too much code for anyone to wade through, but Im hoping for some feedback. I have looked around and haven't found a thread that looks like it will deals neatly with my question. Im using the cms indexhibit (cant create a new tag!) and trying to create an accordion style menu from the menu list it generates. I basically have the behaviour Im after, modifying an existing bit of work but there are quite a few foibles, which are no doubt a conflict between the .click and .toggle and a confused use if statements. I basically want to start from scratch and redo this so I can a) learn from my mistakes b) understand what's happening. Im having trouble now because I dont know where to go from here, or how to trouble shoot it. Can anyone give me a quick analysis how the the script in the head of the document work together? Also any insight into the nature of the conflicts Im seeing and what approach might take to remedy them? If you were going to start afresh what would be your approach? Here is a test to see it in action (warts and all): http://stillstatic.nfshost.com/ This script goes into the document head: <script type='text/javascript'> //im not entirely clear as to what this achieves path = 'path/to/script/'; $(document).ready(function() { setTimeout('move_up()', 1); expandingMenu(0); expandingMenu(1); expandingMenu(2); expandingMenu(3); expandingMenu(4); //etc }); </script> the generated list: <ul> <li class='section-title active_menu'>blogs</li> <li><a class="active" href='#' onclick="do_click();">3</a></li> </ul> <ul> //this menu section dose not have a label: class .section-title <li><a href='#' onclick="do_click();">1</a></li> <li><a href='#' onclick="do_click();">2</a></li> </ul> <ul> //this menu section is not the 'active menu' this is achieved by the jquery script <li class='section-title'>writing</li> <li><a href='#' onclick="do_click();">4</a></li> <li><a href='#' onclick="do_click();">5</a></li> </ul> The meat of in an external script: function expandingMenu(num) { var speed = 500; var menu_title = $("#menu ul").eq(num).children(":first"); // ie. first child be the title with the class .section-title unless the user turned it off var menu_items = $("#menu ul").eq(num).children().filter(function (index) { return index 0; }); // ie. any li NOT in position 0, below li.section-title if (menu_items.is(".active") == true) { menu_title.addClass("active_menu"); //Add a class to the active list so we can style it. } if (menu_title.is(".section-title") == true){ // this if prevents interference with users who turn off the section titling if ((menu_items.is(".active") == false) && (menu_items.is(":visible")) ) { menu_items.hide(0);// first we hide the inactive exhibits } $('li').click(function (){ if ( (menu_title.is(":visible") == true) ){ menu_items.hide(speed); } if ( (menu_items.is(":hidden") == true ) && (('')) ){// ?! without this second condition things break down. . . menu_items.show(speed); } }) menu_title.css({cursor:"pointer"}).toggle( // add click functions + pointer to menu_title function () { menu_items.show(speed);//Open it up }, function () { // this function could even be empty but without the if things get weird if (menu_items.is(".xx")) menu_items.hide(speed); //Take the menu item off of active duty! } ) } }

    Read the article

  • Change English numbers to Persian and vice versa in MVC (httpmodule)?

    - by Mohammad
    I wanna change all English numbers to Persian for showing to users. and change them to English numbers again for giving all requests (Postbacks) e.g: we have something like this in view IRQ170, I wanna show IRQ??? to users and give IRQ170 from users. I know, I have to use Httpmodule, But I don't know how ? Could you please guide me? Edit : Let me describe more : I've written the following http module : using System; using System.Collections.Specialized; using System.Diagnostics; using System.IO; using System.Text; using System.Text.RegularExpressions; using System.Web; using System.Web.UI; using Smartiz.Common; namespace Smartiz.UI.Classes { public class PersianNumberModule : IHttpModule { private StreamWatcher _watcher; #region Implementation of IHttpModule /// <summary> /// Initializes a module and prepares it to handle requests. /// </summary> /// <param name="context">An <see cref="T:System.Web.HttpApplication"/> that provides access to the methods, properties, and events common to all application objects within an ASP.NET application </param> public void Init(HttpApplication context) { context.BeginRequest += ContextBeginRequest; context.EndRequest += ContextEndRequest; } /// <summary> /// Disposes of the resources (other than memory) used by the module that implements <see cref="T:System.Web.IHttpModule"/>. /// </summary> public void Dispose() { } #endregion private void ContextBeginRequest(object sender, EventArgs e) { HttpApplication context = sender as HttpApplication; if (context == null) return; _watcher = new StreamWatcher(context.Response.Filter); context.Response.Filter = _watcher; } private void ContextEndRequest(object sender, EventArgs e) { HttpApplication context = sender as HttpApplication; if (context == null) return; _watcher = new StreamWatcher(context.Response.Filter); context.Response.Filter = _watcher; } } public class StreamWatcher : Stream { private readonly Stream _stream; private readonly MemoryStream _memoryStream = new MemoryStream(); public StreamWatcher(Stream stream) { _stream = stream; } public override void Flush() { _stream.Flush(); } public override int Read(byte[] buffer, int offset, int count) { int bytesRead = _stream.Read(buffer, offset, count); string orgContent = Encoding.UTF8.GetString(buffer, offset, bytesRead); string newContent = orgContent.ToEnglishNumber(); int newByteCountLength = Encoding.UTF8.GetByteCount(newContent); Encoding.UTF8.GetBytes(newContent, 0, Encoding.UTF8.GetByteCount(newContent), buffer, 0); return newByteCountLength; } public override void Write(byte[] buffer, int offset, int count) { string strBuffer = Encoding.UTF8.GetString(buffer, offset, count); MatchCollection htmlAttributes = Regex.Matches(strBuffer, @"(\S+)=[""']?((?:.(?![""']?\s+(?:\S+)=|[>""']))+.)[""']?", RegexOptions.IgnoreCase | RegexOptions.Multiline); foreach (Match match in htmlAttributes) { strBuffer = strBuffer.Replace(match.Value, match.Value.ToEnglishNumber()); } MatchCollection scripts = Regex.Matches(strBuffer, "<script[^>]*>(.*?)</script>", RegexOptions.Singleline | RegexOptions.IgnoreCase | RegexOptions.Multiline | RegexOptions.IgnorePatternWhitespace); foreach (Match match in scripts) { MatchCollection values = Regex.Matches(match.Value, @"([""'])(?:(?=(\\?))\2.)*?\1", RegexOptions.Singleline | RegexOptions.IgnoreCase | RegexOptions.Multiline | RegexOptions.IgnorePatternWhitespace); foreach (Match stringValue in values) { strBuffer = strBuffer.Replace(stringValue.Value, stringValue.Value.ToEnglishNumber()); } } MatchCollection styles = Regex.Matches(strBuffer, "<style[^>]*>(.*?)</style>", RegexOptions.Singleline | RegexOptions.IgnoreCase | RegexOptions.Multiline | RegexOptions.IgnorePatternWhitespace); foreach (Match match in styles) { strBuffer = strBuffer.Replace(match.Value, match.Value.ToEnglishNumber()); } byte[] data = Encoding.UTF8.GetBytes(strBuffer); _memoryStream.Write(data, offset, count); _stream.Write(data, offset, count); } public override string ToString() { return Encoding.UTF8.GetString(_memoryStream.ToArray()); } #region Rest of the overrides public override bool CanRead { get { throw new NotImplementedException(); } } public override bool CanSeek { get { throw new NotImplementedException(); } } public override bool CanWrite { get { throw new NotImplementedException(); } } public override long Seek(long offset, SeekOrigin origin) { throw new NotImplementedException(); } public override void SetLength(long value) { throw new NotImplementedException(); } public override long Length { get { throw new NotImplementedException(); } } public override long Position { get { throw new NotImplementedException(); } set { throw new NotImplementedException(); } } #endregion } } It works well, but It converts all numbers in css and scripts files to Persian and it causes error.

    Read the article

  • Help with shopping cart in javascript

    - by user228390
    Hey guys, I'm having problems with my shopping cart. What I am trying to do is make a function that will add an item the cart and then and function that will view the cart and show the details. But what I have got so far does not do that, it just simply adds and goes straight to view cart. Also I wanted to store the name of each items in different global arrays (name, price and sum) but I can't get it work that way. Can any help me overcome this problem? Edit: I've tried to get it to work by adding some more items and attaching it to another html page, but now the code does not seem to work at all , before it showed the price and total and now I get nothing . javascript code function round_total (c) { var pennies = c * 100; pennies = Math.round(pennies); var strPennies = "" + pennies; var len = strPennies.length; return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len)); } // End of round_total function. /* Start of generate_page function. */ function generate_page (form) { tax = 0.08; delivery_p = 2.99; var odate = new Date(); var qty = form.quantity.value; var product_v = new String(form.product.value); var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$")); var price_without_tax = round_total(qty * total_price); var ttax = round_total(price_without_tax * tax); var delivery = round_total(qty * delivery_p); var total_p = round_total(price_without_tax + ttax + delivery); document.writeln("Quantity: " + qty + "<br>"); document.writeln("Price: $" + total_price + "<br>"); document.writeln("Delivery: $" + delivery + "<br>"); document.writeln("Total: $" + total_p + "<br>"); document.writeln("Order placed on: " + odate.toGMTString()); } function calculate() { round_total (c)(); generate_page (form)(); } HTML code: Shopping cart Welcome, Guest Login Sign Up Stay Updated: Subscribe via RSS Email Updates <div id="header"> <div id="branding" class="container"> <h1>The Finest Toy<br /> Store Online</h1> <p class="desc">If you're looking for a toy shop then look no further.<br/> Go on, treat the kids with our huge selection of<br/>online toy shops selling toys for all ages.</p> </div><!-- end branding --> <div id="navigation"> <ul id="menu" class="container"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">Online Store</a></li> <li><a href="#">CONTACT</a></li> </ul> </div><!-- end navigation --> </div><!-- end header --> Shopping Cart Nintendo DS Xbox Product: Console £149.99 Console + Games £169.99 Quantity: Product: Console £149.99 Console + Games £169.99 Quantity:     Playstation 3 Wii Product: Console £149.99 Console + Games £169.99 Quantity:   Product: Console £149.99 Console + Games £169.99 Quantity:        <input type="submit" value="Add to cart" name="submit" onClick="cart()";/><input , type="reset" value="Reset" name="reset" Copyright © 2010 shopping cart. Content and Header © |Back to top Do I need to show my CSS as well? (Sorry about the coding its not working properly for me, its not showing up the way it should be)

    Read the article

  • Success function not being called when form is submitted

    - by Tom Hartman
    Hi, I've been trying to figure out why the following script's success function isn't running. Everything in my form works perfectly, and the form contents are being emailed correctly, but the success function isn't being called. If anyone could review my code and let me know why my success function isn't being called I would very much appreciate it! Here is the HTML form with notification divs, which are hidden via css: <div id="success" class="notification"> <p>Thank you! Your message has been sent.</p> </div> <div id="failure" class="notification"> <p>Sorry, your message could not be sent.</p> </div> <form id="contact-form" method="post" action="" class="jqtransform"> <label for="name">Name:</label> <input name="name" id="name" type="text" class="validate[required] input" /> <label for="company">Company:</label> <input name="company" id="company" type="text" class="input" /> <label for="phone">Phone:</label> <input name="phone" id="phone" type="text" class="input" /> <label for="email">Email:</label> <input name="email" id="email" type="text" class="validate[required,email] input" /> <div class="sep"></div> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="validate[required] input" /> <div class="clear"></div> <label for="message">Message:</label> <textarea name="message" id="message" class="validate[required]"></textarea> <div id="check-services"> <input type="checkbox" name="services[]" value="Contractor Recommendation" /> <div>Contractor Recommendation</div> <input type="checkbox" name="services[]" value="Proposal Review" /> <div>Proposal Review</div> <input type="checkbox" name="services[]" value="Existing Website Review" /> <div>Existing Website Review</div> <input type="checkbox" name="services[]" value="Work Evaluation" /> <div>Work Evaluation</div> <input type="checkbox" name="services[]" value="Layman Translation" /> <div>Layman Translation</div> <input type="checkbox" name="services[]" value="Project Management" /> <div>Project Management</div> </div> <div class="sep"></div> <input name="submit" id="submit" type="submit" class="button" value="Send" /> <input name="reset" id="reset" type="reset" class="button" value="Clear" onclick="$.validationEngine.closePrompt('.formError',true)" /> </form> Here is the javascript: // CONTACT FORM VALIDATION AND SUBMISSION $(document).ready(function(){ $('#contact-form').validationEngine({ ajaxSubmit: true, ajaxSubmitFile: 'lib/mail.php', scroll: false, success: function(){ $('#success').slideDown(); }, failure: function(){ $('#failure').slideDown(); $('.formError').animate({ marginTop: '+30px' }); } }); }); And here is my PHP mailer script: <?php $name = $_POST['name']; $company = $_POST['company']; $phone = $_POST['phone']; $email = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message']; $services = $_POST['services']; $to = '[email protected]'; $subject = 'THC - Contact'; $content .= "You received a message from ".$name.".\r\n\n"; if ($company): $content .= "They work for ".$company.".\r\n\n"; endif; $content .= "Here's the message:\r\n\n".$message."\r\n\n"; $content .= "And they are interested in the services below:\r\n\n"; $content .= implode("\r\n",$services); if ($phone): $content .= "\r\n\nYou can reach them at ".$phone."."; else: $content .= "\r\n\nNo phone number was provided."; endif; $headers = "From: ".$name."\r\n"; $headers .= "Reply-To: ".$email."\r\n"; if (mail($to,$subject,$content,$headers)): return true; else: return false; endif; ?>

    Read the article

  • Changing multiple objects with a new class name using Jquery

    - by liquilife
    I'd like to click on a trigger and show a specific image. There are multiple triggers which would show a specific image related to it within a set. There are 4 sets The challenge for me is toggling the other images to hide only in this 'set' when one of these triggers are clicked, as there can only be one image showing at a time in each set. Here is the HTML I've put together thus far: <!-- Thumbnails which can be clicked on to toggle the larger preview image --> <div class="materials"> <a href="javascript:;" id="shirtgrey"><img src="/grey_shirt.png" height="122" width="122" /></a> <a href="javascript:;" id="shirtred"><img src="red_shirt.png" height="122" width="122" /></a> <a href="javascript:;" id="shirtblue"><img src="hblue_shirt.png" height="122" width="122" /></a> <a href="javascript:;" id="shirtgreen"><img src="green_shirt.png" height="122" width="122" /></a> </div> <div class="collars"> <a href="javascript:;" id="collargrey"><img src="grey_collar.png" height="122" width="122" /></a> <a href="javascript:;" id="collarred"><img src="red_collar.png" height="122" width="122" /></a> <a href="javascript:;" id="collarblue"><img src="blue_collar.png" height="122" width="122" /></a> <a href="javascript:;" id="collargreen"><img src="green_collar.png" height="122" width="122" /></a> </div> <div class="cuffs"> <a href="javascript:;" id="cuffgrey"><img src="grey_cuff.png" height="122" width="122" /></a> <a href="javascript:;" id="cuffred"><img src="red_cuff.png" height="122" width="122" /></a> <a href="javascript:;" id="cuffblue"><img src="blue_cuff.png" height="122" width="122" /></a> <a href="javascript:;" id="cuffgreen"><img src="/green_cuff.png" height="122" width="122" /></a> </div> <div class="pockets"> <a href="javascript:;" id="pocketgrey"><img src="grey_pocket.png" height="122" width="122" /></a> <a href="javascript:;" id="pocketred"><img src=".png" height="122" width="122" /></a> <a href="javascript:;" id="pocketblue"><img src="blue_pocket.png" height="122" width="122" /></a> <a href="javascript:;" id="pocketgreen"><img src="green_pocket.png" height="122" width="122" /></a> </div> <!-- The larger images where one from each set should be viewable at one time, triggered by the thumb clicked above --> <div class="selectionimg"> <div class="selectShirt"> <img src="grey_shirt.png" height="250" width="250" class="selectShirtGrey show" /> <img src="red_shirt.png" height="250" width="250" class="selectShirtRed hide" /> <img src="blue_shirt.png" height="250" width="250" class="selectShirtBlue hide" /> <img src="green_shirt.png" height="250" width="250" class="selectShirtGreen hide" /> </div> <div class="selectCollar"> <img src="grey_collar.png" height="250" width="250" class="selectCollarGrey show" /> <img src="red_collar.png" height="250" width="250" class="selectCollarRed hide" /> <img src="blue_collar.png" height="250" width="250" class="selectCollarBlue hide" /> <img src="green_collar.png" height="250" width="250" class="selectCollarGreen hide" /> </div> <div class="selectCuff"> <img src="grey_cuff.png" height="250" width="250" class="selectCuffGrey show" /> <img src="red_cuff.png" height="250" width="250" class="selectCuffRed hide" /> <img src="blue_cuff.png" height="250" width="250" class="selectCuffBlue hide" /> <img src="green_cuff.png" height="250" width="250" class="selectCuffGreen hide" /> </div> <div class="selectPocket"> <img src="grey_pocket.png" height="250" width="250" class="selectPocketGrey show" /> <img src="hred_pocket.png" height="250" width="250" class="selectPocketRed hide" /> <img src="blue_pocket.png" height="250" width="250" class="selectPocketBlue hide" /> <img src="green_pocket.png" height="250" width="250" class="selectPocketGreen hide" /> </div> </div> How can jQuery be used to change a class of an image to "show" and ensure that all other images in that same div are set to a class of "hide"? First time posting here. I'm very efficient with HTML and CSS and have a basic understanding of jQuery. I'm learning and this just seems a little bit beyond my abilities at the moment. I hope this all makes sense. Thanks for any help.

    Read the article

  • get iframe property and content

    - by zeroSeven
    is there a way to get the iframe properties and content and be able to display it? example: type it as Rich Text Editor on the iframe and it will be displayed as<b>Rich Text Editor</b> on some part of the page. Rich Text Editor == <b>Rich Text Editor</b> thank you in advance. <html> <head> <title>Rich Text Editor</title> </head> <script type="text/javascript"> function def() { document.getElementById("textEditor").contentWindow.document.designMode="on"; textEditor.document.open(); textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>'); textEditor.document.close(); document.getElementById("fonts").selectedIndex=0; document.getElementById("size").selectedIndex=1; document.getElementById("color").selectedIndex=0; } function fontEdit(x,y) { document.getElementById("textEditor").contentWindow.document.execCommand(x,"",y); textEditor.focus(); } </script> <body onLoad="def()"> <center> <div style="width:500px; text-align:left; margin-bottom:10px "> <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" /> <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" /> <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" /> <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" /> <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)"> <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)"> <option value="black">-</option> <option style="color:red;" value="red">-</option> <option style="color:blue;" value="blue">-</option> <option style="color:green;" value="green">-</option> <option style="color:pink;" value="pink">-</option> </select> | <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" /> <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" /> <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" /> <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" /> </div> <iframe id="textEditor" style="width:500px; height:170px;"> </iframe> </center> </body>

    Read the article

  • Allowing pop-up's and downloads with flex

    - by ShadowVariable
    I'm building an flex app that is basically a wrapper for a few websites. One of them is a google docs website, and I'm trying to get flex to allow downloads or popups or something that will allow me to do it. I've tried a whole bunch of solutions online and none of them have worked out. Here's the code so far: <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="onCreationComplete()"> <s:layout> <s:HorizontalLayout/> </s:layout> <fx:Style source="style.css"/> <fx:Script> <![CDATA[ include "CustomHTMLLoader.as"; private function onCreationComplete():void { // ... other stuff ... var custom:object; custom.htmlHost = new MyHTMLHost(); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:BorderContainer width="100%" height="100%" backgroundColor="#87BED0" styleName="container"> <s:Panel x="188" y="17" width="826" height="112" borderAlpha="0.15" chromeColor="#0C5A74" color="#FFFFFF" cornerRadius="20" dropShadowVisible="false" enabled="true" title="Customer Service Control Panel"> <s:controlBarContent/> <s:Button id="home" x="13" y="10" height="44" label="Phones" click="myViewStack.selectedChild=Home;" enabled="true" icon="@Embed('assets/iconmonstr-mobile-phone-6-icon-32.png')"/> <s:Button id="liveagent" x="131" y="10" height="44" label="Live Agent" click="myViewStack.selectedChild=live_agent;" icon="@Embed('assets/iconmonstr-speech-bubble-11-icon-32.png')"/> <s:Button id="bigcommerce" x="260" y="10" width="158" height="44" label="Big Commerce" click="myViewStack.selectedChild=bigcommerce_home;" icon="@Embed('assets/iconmonstr-coin-6-icon-48.png')"/> <s:Button id="faq" x="436" y="10" width="88" height="44" label="FAQ" click="myViewStack.selectedChild=freqaskquestions;" fontFamily="Arial" icon="@Embed('assets/iconmonstr-help-4-icon-32.png')"/> <s:Button id="call" x="540" y="10" width="131" height="44" label="Google Docs" click="myViewStack.selectedChild=call_notes;" icon="@Embed('assets/iconmonstr-text-file-4-icon-32.png')"/> <s:Button id="hoot" x="684" y="10" width="122" height="44" label="HootSuite" click="myViewStack.selectedChild=hoot_suite;" icon="@Embed('assets/iconmonstr-facebook-icon-32.png')"/> </s:Panel> <mx:ViewStack id="myViewStack" x="0" y="140" width="100%" height="100%" borderStyle="solid"> <s:NavigatorContent id="Home"> <s:BorderContainer width="100%" height="100%"> <mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false" horizontalScrollPolicy="off" location="http://mbvphone.mtbakervapor.org/vbx/messages/inbox" /> </s:BorderContainer> </s:NavigatorContent> <s:NavigatorContent id="bigcommerce_home"> <s:BorderContainer width="100%" height="100%"> <mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false" horizontalScrollPolicy="off" location="http://www.mtbakervapor.com/admin" /> </s:BorderContainer> </s:NavigatorContent> <s:NavigatorContent id="live_agent"> <s:BorderContainer width="100%" height="100%"> <mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false" horizontalScrollPolicy="off" location="http://mbvphone.mtbakervapor.org/liveagent/agent/#login" /> </s:BorderContainer> </s:NavigatorContent> <s:NavigatorContent id="freqaskquestions"> <s:BorderContainer width="100%" height="100%"> <mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false" horizontalScrollPolicy="off" location="http://mbvphone.mtbakervapor.org/liveagent/" /> </s:BorderContainer> </s:NavigatorContent> <s:NavigatorContent id="call_notes"> <s:BorderContainer width="100%" height="100%"> <mx:HTML id="html" x="0" y="0" width="100%" height="100%" borderVisible="false" horizontalScrollPolicy="off" location="https://drive.google.com/a/mtbakervapor.com/" htmlHost="{new CustomHost()}" /> </s:BorderContainer> </s:NavigatorContent> <s:NavigatorContent id="hoot_suite"> <s:BorderContainer width="100%" height="100%"> <mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false" horizontalScrollPolicy="off" location="https://hootsuite.com/login" /> </s:BorderContainer> </s:NavigatorContent> </mx:ViewStack> <s:Image x="0" y="0" width="180" height="140" scaleMode="letterbox" smooth="false" source="assets/mbvlogo_black.png"/> </s:BorderContainer> </s:WindowedApplication> and the custom class code: package { import flash.html.HTMLHost; import flash.html.HTMLWindowCreateOptions; import flash.html.HTMLLoader; public class MyHTMLHost extends HTMLHost { public function MyHTMLHost(defaultBehaviors:Boolean=true) { super(defaultBehaviors); } override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader { // all JS calls and HREFs to open a new window should use the existing window return HTMLLoader.createRootWindow(); } } } any help would be appreciated.

    Read the article

  • Can this PHP function be improved?

    - by jasondavis
    Below is some code I am working on for a navigation menu, if you are on a certain page, it will add a "current" css class to the proper tab. I am curious if there is a better way to do this in PHP because it really seems like a lot of code to do such a simple task? My pages will also have a jquery library already loaded, would it be better to set the tab with jquery instead of PHP? Any tips appreciated <?PHP active_header('page identifier goes here'); //ie; 'home' or 'users.online' function active_header($page_name) { // arrays for header menu selector $header_home = array('home' => true); $header_users = array( 'users.online' => true, 'users.online.male' => true, 'users.online.female' => true, 'users.online.friends' => true, 'users.location' => true, 'users.featured' => true, 'users.new' => true, 'users.browse' => true, 'users.search' => true, 'users.staff' => true ); $header_forum = array('forum' => true); $header_more = array( 'widgets' => true, 'news' => true, 'promote' => true, 'development' => true, 'bookmarks' => true, 'about' => true ); $header_money = array( 'account.money' => true, 'account.store' => true, 'account.lottery' => true, 'users.top.money' => true ); $header_account = array('account' => true); $header_mail = array( 'mail.inbox' => true, 'mail.sentbox' => true, 'mail.trash' => true, 'bulletins.post' => true, 'bulletins.my' => true, 'bulletins' => true ); // set variables if there array value exist if (isset($header_home[$page_name])){ $current_home = 'current'; }else if (isset($header_users[$page_name])){ $current_users = 'current'; }else if (isset($header_forum[$page_name])){ $current_forum = 'current'; }else if (isset($header_more[$page_name])){ $current_more = 'current'; }else if (isset($header_money[$page_name])){ $current_money = 'current'; }else if (isset($header_account[$page_name])){ $current_account = 'current'; }else if (isset($header_mail[$page_name])){ $current_mail = 'current'; } // show the links echo '<li class="' . (isset($current_home) ? $current_home : '') . '"><a href=""><em>Home</em></a></li>'; echo '<li class="' . (isset($current_users) ? $current_users : '') . '"><a href=""><em>Users</em></a></li>'; echo '<li class="' . (isset($current_forum) ? $current_forum : '') . '"><a href=""><em>Forum</em></a></li>'; echo '<li class="' . (isset($current_more) ? $current_more : '') . '"><a href=""><em>More</em></a></li>'; echo '<li class="' . (isset($current_money) ? $current_money : '') . '"><a href=""><em>Money</em></a></li>'; echo '<li class="' . (isset($current_account) ? $current_account : '') . '"><a href=""><em>Account</em></a></li>'; echo '<li class="' . (isset($current_mail) ? $current_mail : '') . '"><a href=""><em>Mail</em></a></li>'; } ?>

    Read the article

  • How can I make a table move in JavaScript?

    - by Michal Skrzypek
    My problem is that I was creating a simple website the other day and I needed the content to move according to the button pressed. I managed to do so in CSS3, but the solution did not work for IE whatsoever. Therefore I would like to ask if there is a simple solution for that in js? I don't know js at all but I heard what I need is much easier in js than in css. Details: http://i42.tinypic.com/6yl4ia.png I need the table in the picture to move according to the buttons (which are labels to be exact). The visible area is a div. Here's the relevant code (without animation as I was not satisfied with it): body { background-color: #fff; color: #fff; padding:0px; } #bodywrapperfixed { width: 1248px; margin: 0px auto; position: relative; overflow: hidden; height: 730px; } #bodywrapper { display:block; background-color: #fff; width: 1248px; color: #59595B; padding-top:50px; font-family: 'Roboto', sans-serif; position: absolute; top:0px; left:0px; z-index:1; font-size: 60px; height:730px; } #bodywrapper img { width:400px; padding:15px 0px 20px 0px; } #texten { font-family: 'Roboto', sans-serif; font-size: 35px; padding:5px; } #textpl { font-family: 'Roboto', sans-serif; font-size: 25px; padding:5px; } table#linki { width: 110px; border: none; margin-top:15px; } label { display: block; height: 54px; width: 54px; color:#fff; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 35px; background-color: #117D10; text-align: center; padding:23px; } label:hover { background-color: #004F00; cursor: pointer; } input#pl { position: absolute; top: -9999px; left: -9999px; } input#en { position: absolute; top: -9999px; left: -9999px; } and the relevant HTML: <div id="bodywrapperfixed"> <div id="bodywrapperfloat"> <table id="ramka"> <tr> <td>random text</td> <td><div id="bodywrapper"> <center> <div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;">&nbsp;For everyone.</div></div> <div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;">&nbsp;&nbsp;Dla wszystkich.</div></div> <img src="imgs/xboxone.png"> <div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div> <div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoja wersja opowiesci:</div></div> <table id="linki"> <tr> <td><label for="en">en</label><input id="en" type="checkbox"></td> <td><label for="pl">pl</label><input id="pl" type="checkbox"></td> </tr></table> </center> </div></td> <td>random text</td> </tr> </table> </div> </div> Here's what it looks like: http://ingame.lh.pl/thinkone/ Please help me.

    Read the article

  • Using FiddlerCore to capture HTTP Requests with .NET

    - by Rick Strahl
    Over the last few weeks I’ve been working on my Web load testing utility West Wind WebSurge. One of the key components of a load testing tool is the ability to capture URLs effectively so that you can play them back later under load. One of the options in WebSurge for capturing URLs is to use its built-in capture tool which acts as an HTTP proxy to capture any HTTP and HTTPS traffic from most Windows HTTP clients, including Web Browsers as well as standalone Windows applications and services. To make this happen, I used Eric Lawrence’s awesome FiddlerCore library, which provides most of the functionality of his desktop Fiddler application, all rolled into an easy to use library that you can plug into your own applications. FiddlerCore makes it almost too easy to capture HTTP content! For WebSurge I needed to capture all HTTP traffic in order to capture the full HTTP request – URL, headers and any content posted by the client. The result of what I ended up creating is this semi-generic capture form: In this post I’m going to demonstrate how easy it is to use FiddlerCore to build this HTTP Capture Form.  If you want to jump right in here are the links to get Telerik’s Fiddler Core and the code for the demo provided here. FiddlerCore Download FiddlerCore on NuGet Show me the Code (WebSurge Integration code from GitHub) Download the WinForms Sample Form West Wind Web Surge (example implementation in live app) Note that FiddlerCore is bound by a license for commercial usage – see license.txt in the FiddlerCore distribution for details. Integrating FiddlerCore FiddlerCore is a library that simply plugs into your application. You can download it from the Telerik site and manually add the assemblies to your project, or you can simply install the NuGet package via:       PM> Install-Package FiddlerCore The library consists of the FiddlerCore.dll as well as a couple of support libraries (CertMaker.dll and BCMakeCert.dll) that are used for installing SSL certificates. I’ll have more on SSL captures and certificate installation later in this post. But first let’s see how easy it is to use FiddlerCore to capture HTTP content by looking at how to build the above capture form. Capturing HTTP Content Once the library is installed it’s super easy to hook up Fiddler functionality. Fiddler includes a number of static class methods on the FiddlerApplication object that can be called to hook up callback events as well as actual start monitoring HTTP URLs. In the following code directly lifted from WebSurge, I configure a few filter options on Form level object, from the user inputs shown on the form by assigning it to a capture options object. In the live application these settings are persisted configuration values, but in the demo they are one time values initialized and set on the form. Once these options are set, I hook up the AfterSessionComplete event to capture every URL that passes through the proxy after the request is completed and start up the Proxy service:void Start() { if (tbIgnoreResources.Checked) CaptureConfiguration.IgnoreResources = true; else CaptureConfiguration.IgnoreResources = false; string strProcId = txtProcessId.Text; if (strProcId.Contains('-')) strProcId = strProcId.Substring(strProcId.IndexOf('-') + 1).Trim(); strProcId = strProcId.Trim(); int procId = 0; if (!string.IsNullOrEmpty(strProcId)) { if (!int.TryParse(strProcId, out procId)) procId = 0; } CaptureConfiguration.ProcessId = procId; CaptureConfiguration.CaptureDomain = txtCaptureDomain.Text; FiddlerApplication.AfterSessionComplete += FiddlerApplication_AfterSessionComplete; FiddlerApplication.Startup(8888, true, true, true); } The key lines for FiddlerCore are just the last two lines of code that include the event hookup code as well as the Startup() method call. Here I only hook up to the AfterSessionComplete event but there are a number of other events that hook various stages of the HTTP request cycle you can also hook into. Other events include BeforeRequest, BeforeResponse, RequestHeadersAvailable, ResponseHeadersAvailable and so on. In my case I want to capture the request data and I actually have several options to capture this data. AfterSessionComplete is the last event that fires in the request sequence and it’s the most common choice to capture all request and response data. I could have used several other events, but AfterSessionComplete is one place where you can look both at the request and response data, so this will be the most common place to hook into if you’re capturing content. The implementation of AfterSessionComplete is responsible for capturing all HTTP request headers and it looks something like this:private void FiddlerApplication_AfterSessionComplete(Session sess) { // Ignore HTTPS connect requests if (sess.RequestMethod == "CONNECT") return; if (CaptureConfiguration.ProcessId > 0) { if (sess.LocalProcessID != 0 && sess.LocalProcessID != CaptureConfiguration.ProcessId) return; } if (!string.IsNullOrEmpty(CaptureConfiguration.CaptureDomain)) { if (sess.hostname.ToLower() != CaptureConfiguration.CaptureDomain.Trim().ToLower()) return; } if (CaptureConfiguration.IgnoreResources) { string url = sess.fullUrl.ToLower(); var extensions = CaptureConfiguration.ExtensionFilterExclusions; foreach (var ext in extensions) { if (url.Contains(ext)) return; } var filters = CaptureConfiguration.UrlFilterExclusions; foreach (var urlFilter in filters) { if (url.Contains(urlFilter)) return; } } if (sess == null || sess.oRequest == null || sess.oRequest.headers == null) return; string headers = sess.oRequest.headers.ToString(); var reqBody = sess.GetRequestBodyAsString(); // if you wanted to capture the response //string respHeaders = session.oResponse.headers.ToString(); //var respBody = session.GetResponseBodyAsString(); // replace the HTTP line to inject full URL string firstLine = sess.RequestMethod + " " + sess.fullUrl + " " + sess.oRequest.headers.HTTPVersion; int at = headers.IndexOf("\r\n"); if (at < 0) return; headers = firstLine + "\r\n" + headers.Substring(at + 1); string output = headers + "\r\n" + (!string.IsNullOrEmpty(reqBody) ? reqBody + "\r\n" : string.Empty) + Separator + "\r\n\r\n"; BeginInvoke(new Action<string>((text) => { txtCapture.AppendText(text); UpdateButtonStatus(); }), output); } The code starts by filtering out some requests based on the CaptureOptions I set before the capture is started. These options/filters are applied when requests actually come in. This is very useful to help narrow down the requests that are captured for playback based on options the user picked. I find it useful to limit requests to a certain domain for captures, as well as filtering out some request types like static resources – images, css, scripts etc. This is of course optional, but I think it’s a common scenario and WebSurge makes good use of this feature. AfterSessionComplete like other FiddlerCore events, provides a Session object parameter which contains all the request and response details. There are oRequest and oResponse objects to hold their respective data. In my case I’m interested in the raw request headers and body only, as you can see in the commented code you can also retrieve the response headers and body. Here the code captures the request headers and body and simply appends the output to the textbox on the screen. Note that the Fiddler events are asynchronous, so in order to display the content in the UI they have to be marshaled back the UI thread with BeginInvoke, which here simply takes the generated headers and appends it to the existing textbox test on the form. As each request is processed, the headers are captured and appended to the bottom of the textbox resulting in a Session HTTP capture in the format that Web Surge internally supports, which is basically raw request headers with a customized 1st HTTP Header line that includes the full URL rather than a server relative URL. When the capture is done the user can either copy the raw HTTP session to the clipboard, or directly save it to file. This raw capture format is the same format WebSurge and also Fiddler use to import/export request data. While this code is application specific, it demonstrates the kind of logic that you can easily apply to the request capture process, which is one of the reasonsof why FiddlerCore is so powerful. You get to choose what content you want to look up as part of your own application logic and you can then decide how to capture or use that data as part of your application. The actual captured data in this case is only a string. The user can edit the data by hand or in the the case of WebSurge, save it to disk and automatically open the captured session as a new load test. Stopping the FiddlerCore Proxy Finally to stop capturing requests you simply disconnect the event handler and call the FiddlerApplication.ShutDown() method:void Stop() { FiddlerApplication.AfterSessionComplete -= FiddlerApplication_AfterSessionComplete; if (FiddlerApplication.IsStarted()) FiddlerApplication.Shutdown(); } As you can see, adding HTTP capture functionality to an application is very straight forward. FiddlerCore offers tons of features I’m not even touching on here – I suspect basic captures are the most common scenario, but a lot of different things can be done with FiddlerCore’s simple API interface. Sky’s the limit! The source code for this sample capture form (WinForms) is provided as part of this article. Adding Fiddler Certificates with FiddlerCore One of the sticking points in West Wind WebSurge has been that if you wanted to capture HTTPS/SSL traffic, you needed to have the full version of Fiddler and have HTTPS decryption enabled. Essentially you had to use Fiddler to configure HTTPS decryption and the associated installation of the Fiddler local client certificate that is used for local decryption of incoming SSL traffic. While this works just fine, requiring to have Fiddler installed and then using a separate application to configure the SSL functionality isn’t ideal. Fortunately FiddlerCore actually includes the tools to register the Fiddler Certificate directly using FiddlerCore. Why does Fiddler need a Certificate in the first Place? Fiddler and FiddlerCore are essentially HTTP proxies which means they inject themselves into the HTTP conversation by re-routing HTTP traffic to a special HTTP port (8888 by default for Fiddler) and then forward the HTTP data to the original client. Fiddler injects itself as the system proxy in using the WinInet Windows settings  which are the same settings that Internet Explorer uses and that are configured in the Windows and Internet Explorer Internet Settings dialog. Most HTTP clients running on Windows pick up and apply these system level Proxy settings before establishing new HTTP connections and that’s why most clients automatically work once Fiddler – or FiddlerCore/WebSurge are running. For plain HTTP requests this just works – Fiddler intercepts the HTTP requests on the proxy port and then forwards them to the original port (80 for HTTP and 443 for SSL typically but it could be any port). For SSL however, this is not quite as simple – Fiddler can easily act as an HTTPS/SSL client to capture inbound requests from the server, but when it forwards the request to the client it has to also act as an SSL server and provide a certificate that the client trusts. This won’t be the original certificate from the remote site, but rather a custom local certificate that effectively simulates an SSL connection between the proxy and the client. If there is no custom certificate configured for Fiddler the SSL request fails with a certificate validation error. The key for this to work is that a custom certificate has to be installed that the HTTPS client trusts on the local machine. For a much more detailed description of the process you can check out Eric Lawrence’s blog post on Certificates. If you’re using the desktop version of Fiddler you can install a local certificate into the Windows certificate store. Fiddler proper does this from the Options menu: This operation does several things: It installs the Fiddler Root Certificate It sets trust to this Root Certificate A new client certificate is generated for each HTTPS site monitored Certificate Installation with FiddlerCore You can also provide this same functionality using FiddlerCore which includes a CertMaker class. Using CertMaker is straight forward to use and it provides an easy way to create some simple helpers that can install and uninstall a Fiddler Root certificate:public static bool InstallCertificate() { if (!CertMaker.rootCertExists()) { if (!CertMaker.createRootCert()) return false; if (!CertMaker.trustRootCert()) return false; } return true; } public static bool UninstallCertificate() { if (CertMaker.rootCertExists()) { if (!CertMaker.removeFiddlerGeneratedCerts(true)) return false; } return true; } InstallCertificate() works by first checking whether the root certificate is already installed and if it isn’t goes ahead and creates a new one. The process of creating the certificate is a two step process – first the actual certificate is created and then it’s moved into the certificate store to become trusted. I’m not sure why you’d ever split these operations up since a cert created without trust isn’t going to be of much value, but there are two distinct steps. When you trigger the trustRootCert() method, a message box will pop up on the desktop that lets you know that you’re about to trust a local private certificate. This is a security feature to ensure that you really want to trust the Fiddler root since you are essentially installing a man in the middle certificate. It’s quite safe to use this generated root certificate, because it’s been specifically generated for your machine and thus is not usable from external sources, the only way to use this certificate in a trusted way is from the local machine. IOW, unless somebody has physical access to your machine, there’s no useful way to hijack this certificate and use it for nefarious purposes (see Eric’s post for more details). Once the Root certificate has been installed, FiddlerCore/Fiddler create new certificates for each site that is connected to with HTTPS. You can end up with quite a few temporary certificates in your certificate store. To uninstall you can either use Fiddler and simply uncheck the Decrypt HTTPS traffic option followed by the remove Fiddler certificates button, or you can use FiddlerCore’s CertMaker.removeFiddlerGeneratedCerts() which removes the root cert and any of the intermediary certificates Fiddler created. Keep in mind that when you uninstall you uninstall the certificate for both FiddlerCore and Fiddler, so use UninstallCertificate() with care and realize that you might affect the Fiddler application’s operation by doing so as well. When to check for an installed Certificate Note that the check to see if the root certificate exists is pretty fast, while the actual process of installing the certificate is a relatively slow operation that even on a fast machine takes a few seconds. Further the trust operation pops up a message box so you probably don’t want to install the certificate repeatedly. Since the check for the root certificate is fast, you can easily put a call to InstallCertificate() in any capture startup code – in which case the certificate installation only triggers when a certificate is in fact not installed. Personally I like to make certificate installation explicit – just like Fiddler does, so in WebSurge I use a small drop down option on the menu to install or uninstall the SSL certificate:   This code calls the InstallCertificate and UnInstallCertificate functions respectively – the experience with this is similar to what you get in Fiddler with the extra dialog box popping up to prompt confirmation for installation of the root certificate. Once the cert is installed you can then capture SSL requests. There’s a gotcha however… Gotcha: FiddlerCore Certificates don’t stick by Default When I originally tried to use the Fiddler certificate installation I ran into an odd problem. I was able to install the certificate and immediately after installation was able to capture HTTPS requests. Then I would exit the application and come back in and try the same HTTPS capture again and it would fail due to a missing certificate. CertMaker.rootCertExists() would return false after every restart and if re-installed the certificate a new certificate would get added to the certificate store resulting in a bunch of duplicated root certificates with different keys. What the heck? CertMaker and BcMakeCert create non-sticky CertificatesI turns out that FiddlerCore by default uses different components from what the full version of Fiddler uses. Fiddler uses a Windows utility called MakeCert.exe to create the Fiddler Root certificate. FiddlerCore however installs the CertMaker.dll and BCMakeCert.dll assemblies, which use a different crypto library (Bouncy Castle) for certificate creation than MakeCert.exe which uses the Windows Crypto API. The assemblies provide support for non-windows operation for Fiddler under Mono, as well as support for some non-Windows certificate platforms like iOS and Android for decryption. The bottom line is that the FiddlerCore provided bouncy castle assemblies are not sticky by default as the certificates created with them are not cached as they are in Fiddler proper. To get certificates to ‘stick’ you have to explicitly cache the certificates in Fiddler’s internal preferences. A cache aware version of InstallCertificate looks something like this:public static bool InstallCertificate() { if (!CertMaker.rootCertExists()) { if (!CertMaker.createRootCert()) return false; if (!CertMaker.trustRootCert()) return false; App.Configuration.UrlCapture.Cert = FiddlerApplication.Prefs.GetStringPref("fiddler.certmaker.bc.cert", null); App.Configuration.UrlCapture.Key = FiddlerApplication.Prefs.GetStringPref("fiddler.certmaker.bc.key", null); } return true; } public static bool UninstallCertificate() { if (CertMaker.rootCertExists()) { if (!CertMaker.removeFiddlerGeneratedCerts(true)) return false; } App.Configuration.UrlCapture.Cert = null; App.Configuration.UrlCapture.Key = null; return true; } In this code I store the Fiddler cert and private key in an application configuration settings that’s stored with the application settings (App.Configuration.UrlCapture object). These settings automatically persist when WebSurge is shut down. The values are read out of Fiddler’s internal preferences store which is set after a new certificate has been created. Likewise I clear out the configuration settings when the certificate is uninstalled. In order for these setting to be used you have to also load the configuration settings into the Fiddler preferences *before* a call to rootCertExists() is made. I do this in the capture form’s constructor:public FiddlerCapture(StressTestForm form) { InitializeComponent(); CaptureConfiguration = App.Configuration.UrlCapture; MainForm = form; if (!string.IsNullOrEmpty(App.Configuration.UrlCapture.Cert)) { FiddlerApplication.Prefs.SetStringPref("fiddler.certmaker.bc.key", App.Configuration.UrlCapture.Key); FiddlerApplication.Prefs.SetStringPref("fiddler.certmaker.bc.cert", App.Configuration.UrlCapture.Cert); }} This is kind of a drag to do and not documented anywhere that I could find, so hopefully this will save you some grief if you want to work with the stock certificate logic that installs with FiddlerCore. MakeCert provides sticky Certificates and the same functionality as Fiddler But there’s actually an easier way. If you want to skip the above Fiddler preference configuration code in your application you can choose to distribute MakeCert.exe instead of certmaker.dll and bcmakecert.dll. When you use MakeCert.exe, the certificates settings are stored in Windows so they are available without any custom configuration inside of your application. It’s easier to integrate and as long as you run on Windows and you don’t need to support iOS or Android devices is simply easier to deal with. To integrate into your project, you can remove the reference to CertMaker.dll (and the BcMakeCert.dll assembly) from your project. Instead copy MakeCert.exe into your output folder. To make sure MakeCert.exe gets pushed out, include MakeCert.exe in your project and set the Build Action to None, and Copy to Output Directory to Copy if newer. Note that the CertMaker.dll reference in the project has been removed and on disk the files for Certmaker.dll, as well as the BCMakeCert.dll files on disk. Keep in mind that these DLLs are resources of the FiddlerCore NuGet package, so updating the package may end up pushing those files back into your project. Once MakeCert.exe is distributed FiddlerCore checks for it first before using the assemblies so as long as MakeCert.exe exists it’ll be used for certificate creation (at least on Windows). Summary FiddlerCore is a pretty sweet tool, and it’s absolutely awesome that we get to plug in most of the functionality of Fiddler right into our own applications. A few years back I tried to build this sort of functionality myself for an app and ended up giving up because it’s a big job to get HTTP right – especially if you need to support SSL. FiddlerCore now provides that functionality as a turnkey solution that can be plugged into your own apps easily. The only downside is FiddlerCore’s documentation for more advanced features like certificate installation which is pretty sketchy. While for the most part FiddlerCore’s feature set is easy to work with without any documentation, advanced features are often not intuitive to gleam by just using Intellisense or the FiddlerCore help file reference (which is not terribly useful). While Eric Lawrence is very responsive on his forum and on Twitter, there simply isn’t much useful documentation on Fiddler/FiddlerCore available online. If you run into trouble the forum is probably the first place to look and then ask a question if you can’t find the answer. The best documentation you can find is Eric’s Fiddler Book which covers a ton of functionality of Fiddler and FiddlerCore. The book is a great reference to Fiddler’s feature set as well as providing great insights into the HTTP protocol. The second half of the book that gets into the innards of HTTP is an excellent read for anybody who wants to know more about some of the more arcane aspects and special behaviors of HTTP – it’s well worth the read. While the book has tons of information in a very readable format, it’s unfortunately not a great reference as it’s hard to find things in the book and because it’s not available online you can’t electronically search for the great content in it. But it’s hard to complain about any of this given the obvious effort and love that’s gone into this awesome product for all of these years. A mighty big thanks to Eric Lawrence  for having created this useful tool that so many of us use all the time, and also to Telerik for picking up Fiddler/FiddlerCore and providing Eric the resources to support and improve this wonderful tool full time and keeping it free for all. Kudos! Resources FiddlerCore Download FiddlerCore NuGet Fiddler Capture Sample Form Fiddler Capture Form in West Wind WebSurge (GitHub) Eric Lawrence’s Fiddler Book© Rick Strahl, West Wind Technologies, 2005-2014Posted in .NET  HTTP   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

< Previous Page | 471 472 473 474 475 476 477 478 479 480 481  | Next Page >