Search Results

Search found 14253 results on 571 pages for 'css parsing'.

Page 328/571 | < Previous Page | 324 325 326 327 328 329 330 331 332 333 334 335  | Next Page >

  • How to improve designer and developer work flow?

    - by mbdev
    I work in a small startup with two front end developers and one designer. Currently the process starts with the designer sending a png file with the whole page design and assets if needed. My task as front end developer is to convert it to a HTML/CSS page. My work flow currently looks like this: Lay out the distinct parts using html elements. Style each element very roughly (floats, minimal fonts and padding) so I can modify it using inspection. Using Chrome Developer Tools (inspect) add/change css attributes while updating the css file. Refresh the page after X amount of changes Use Pixel Perfect to refine the design more. Sit with the designer to make last adjustments. Inferring the paddings, margins, font sizes using trial and error takes a lot of time and I feel the process could become more efficient but not sure how to improve it. Using PSD files is not an option since buying Photoshop for each developer is currently not considered. Design guide is also not available since design is still evolving and new features are introduced. Ideas for improving the process above and sharing how the process looks like in your company will be great.

    Read the article

  • Bundling in visual studio 2012 for web optimization

    - by Jalpesh P. Vadgama
    I have been writing a series of posts about Visual Studio 2012 features. This series describes what are the new features in the Visual Studio 2012. This post will also be part of Visual Studio 2012 feature series. As we know now days web applications or site are providing more and more features and due to that we have include lots of JavaScript and CSS files in our web application.So once we load site then we will have all the JavaScript  js files and CSS files loaded in the browsers and If you have lots of JavaScript files then its consumes lots of time when browser request them. Following images show the same situation over there.   Here you can see total 25 files loaded into the system and it's almost more than 1MB of total size. As we need to have our web application of site very responsive and need to have high performance application/site, this will be a performance bottleneck to our site. In situation like this, the bundling feature of Visual Studio 2012 and ASP.NET 4.5 comes very handy. With the help of this feature we do optimization there and we can increase performance of our application. To enable this feature in Visual Studio 2012 we just made debug=”false” in web.config of our application like following. Now once you enable this feature and run this application in the browser to see your traffic it will have less items like following. As you can see in the above image there are only 8 items. So after enabling bundling it will automatically convert all js and css files into the one request. Isn’t that cool feature? This feature will surely going to have great impact on performance. Hope you like it. Stay tuned for more.. Till then happy programming!!

    Read the article

  • URL is generating a /#!/splash-page

    - by user32642
    My site for some reason is generating a shebang - /#!/splash-page on the URL. For example when I type www.modernvintage1005.com, the browser returns www.modernvintage1005.com/#!/splash-page and every subsequent page is /#!/about, /#!/contact, and so forth. There's absolutely nothing on the Google about this. There is a lot of rewrite help to eliminate .index.php from the home page, but that's it. How do I rewrite it to just say domain.com and domain.com/about.html, etc.? Here is my .htaccess file if you need to see it. # Rewrite Rule <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # compress text, html, javascript, css, xml: <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddType x-font/otf .otf AddType x-font/ttf .ttf AddType x-font/eot .eot AddType x-font/woff .woff AddType image/x-icon .ico AddType image/png .png </IfModule> ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ##

    Read the article

  • Google Chrome with strange behavior

    - by user72274
    I'm former Chromium-browser user, but after not upgrading the PPA for 2 months, I switched to Google Chrome browser yesterday. Everything is okay, except some strange behavior on some pages and crashing after loading "chrome://" configuration pages. The best known website with strange behavior is youtube, there is a picture what I see: When I open user menu in top right corner, it crashes that way and even after closing the menu, some parts of menu stay display. You may say it's Youtube problem, no, I have this problem at least on three other websites, here it is on Imgur: The problem isn't for the whole side, sometimes it happens from the middle of the screen. The interesting part is that it happens everytime in the same distance from the right border. When I check the DOM elements with the Developer tool, the overlay which shows element's position is rendered how it should be. What is more, if there is anchor after the crashed area, it works after clicking on it. Selecting text in crashed page is impossible. I hope there is enough information to give me an advice, thanks in advance. :) EDIT: Here is what the browser posted in "chrome://gpu-internals/": Graphics Feature Status Canvas: Software only, hardware acceleration unavailable Compositing: Hardware accelerated 3D CSS: Hardware accelerated CSS Animation: Software animated. WebGL: Hardware accelerated WebGL multisampling: Hardware accelerated Problems Detected Accelerated CSS animation has been disabled at the command line. Accelerated 2d canvas is unstable in Linux at the moment. Ubuntu 12.04 | Gnome-shell 3.4.1 | ATI Radeon 4550 | Screen resolution 1024*768 | Chrome version 20.0.1132.57 (Official Build 145807)

    Read the article

  • jQuery tools modal overlay display problem in IE6-8

    - by Michael Stone
    I'm trying to enable the overlay to be modal. It works perfectly fine in FireFox, but the window object is behind the mask when it becomes modal. This prevents any interaction with it and the page is actually useless. I've tried debugging this for a while and can't figure it out. Here is a link to the example on their site: http://flowplayer.org/tools/demos/overlay/modal-dialog.html $.fn.cfwindow = function(btnEvent,modal,draggable){ //error checking if(btnEvent == ""){ alert('Error in window :\n Please provide an id that instantiates the window. '); } if(!modal && !draggable){ $('#'+btnEvent+'[rel]').overlay(); $('#content_overlay').css('cursor','default'); } if(!modal && draggable){ $('#'+btnEvent+'[rel]').overlay(); $('#content_overlay').css('cursor','move'); $('#custom').draggable(); } if(modal){ $('#'+btnEvent+'[rel]').overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#646464', loadSpeed: 200, opacity: 0.6 }, closeOnClick: false }); $('#content_overlay').css('cursor','default'); //$('#custom').addClass('modal'); } }; That's what I'm referencing when I call through: <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); var modal = <cfoutput>#attributes.modal#; var drag = #attributes.draggable#; var btn = '#attributes.selector#'; var src = '#attributes.source#'; var wid = '#attributes.width#'; $('##custom').width(parseInt(wid)); $('div##load_content').load(src); $('##custom').cfwindow(btn,modal,drag,wid); }); </script> CSS for the modal: <style type="text/css"> .modal { display:none; text-align:left; background-color:#FFFFFF; -moz-border-radius:6px; -webkit-border-radius:6px; } </style> Exclude the and the additional pound signs, IE. "##". Screen shot of the problem: http://twitpic.com/1tak06 Note: IE6 and IE8 have the same problem. Any help would be appreciated.

    Read the article

  • Google Chrome audit on caching

    - by Álvaro G. Vicario
    If I run an audit on my sites with Google Chrome, I get this message in the Leverage browser caching section: The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers: A list of all the pictures follows. I get a similar notice in Leverage proxy caching: Consider adding a "Cache-Control: public" header to the following resources: Apart from pictures, I also get a notice about HTML, CSS and JavaScript files: The following resources are explicitly non-cacheable. Consider making them cacheable if possible: Its funny because I've worked hard to cache all static contents (except for pictures, where I just left Apache's default settings). Firefox does indeed store all these items in cache. Is there anything I should improve in my HTTP headers? Here's the complete header set of some items as loaded after removing the browser caché. Pictures use default settings I didn't really check before, the rest should be cachéd for three hours. I can set headers with both .htaccess and PHP. PNG HTTP/1.1 200 OK Date: Sat, 31 Jul 2010 12:46:14 GMT Server: Apache Last-Modified: Thu, 18 Mar 2010 21:40:54 GMT Etag: "c48024-230-4821a15d6c580" Accept-Ranges: bytes Content-Length: 560 Keep-Alive: timeout=4 Connection: Keep-Alive Content-Type: image/png HTML HTTP/1.1 200 OK Date: Sat, 31 Jul 2010 12:46:13 GMT Server: Apache X-Powered-By: PHP/5.2.11 Expires: Sat, 31 Jul 2010 15:46:13 GMT Cache-Control: max-age=10800, s-maxage=10800, must-revalidate, proxy-revalidate Content-Encoding: gzip Vary: Accept-Encoding Last-Modified: Wed, 24 Mar 2010 20:30:36 GMT Keep-Alive: timeout=4 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=ISO-8859-15 CSS HTTP/1.1 200 OK Date: Sat, 31 Jul 2010 12:48:21 GMT Server: Apache X-Powered-By: PHP/5.2.11 Expires: Sat, 31 Jul 2010 15:48:21 GMT Cache-Control: max-age=10800, s-maxage=10800, must-revalidate, proxy-revalidate Content-Encoding: gzip Vary: Accept-Encoding Last-Modified: Thu, 18 Mar 2010 21:40:12 GMT Keep-Alive: timeout=4 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/css JavaScript HTTP/1.1 200 OK Date: Sat, 31 Jul 2010 12:48:21 GMT Server: Apache X-Powered-By: PHP/5.2.11 Expires: Sat, 31 Jul 2010 15:48:21 GMT Cache-Control: max-age=10800, s-maxage=10800, must-revalidate, proxy-revalidate Content-Encoding: gzip Vary: Accept-Encoding Last-Modified: Thu, 18 Mar 2010 21:40:12 GMT Keep-Alive: timeout=4 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/x-javascript Update I've tested Jumby's suggestion and set my CSS's expire to 1 year: Cache-Control:max-age=31536000, s-maxage=31536000, must-revalidate, proxy-revalidate Connection:Keep-Alive Content-Encoding:gzip Content-Length:4198 Content-Type:text/css Date:Mon, 02 Aug 2010 20:48:56 GMT Expires:Tue, 02 Aug 2011 20:48:56 GMT Keep-Alive:timeout=5, max=99 Last-Modified:Thu, 18 Mar 2010 20:40:12 GMT Server:Apache/2.2.14 (Win32) PHP/5.3.1 Vary:Accept-Encoding X-Powered-By:PHP/5.3.1 However, Chrome still claims "explicitly non-cacheable".

    Read the article

  • Colorbox class don't work with ajax/dom object

    - by almal
    i usually use colorbox tool for open "popup windows" in my page and all are fine. In my new project the situation is little different because i use js/ajax/dom for create dinamically my objects in handleRequestStateChange() function. After import js,jquery and css for colorbox, in the head of my js page i write: $(document).ready(function () { $(window).scroll(function () { //oP1 = document.createTextNode(posizione_menu.offsetTop); //divIpt.appendChild(oMtx1); $(".divHcss").css("position", "fixed").css("top", "0px").css("z-index", "999"); }); //Examples of how to assign the Colorbox event to elements $(".group1").colorbox({rel:'group1'}); $(".group2").colorbox({rel:'group2', transition:"fade"}); $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"}); $(".group4").colorbox({rel:'group4', slideshow:true}); $(".ajax").colorbox(); $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390}); $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); $(".inline").colorbox({inline:true, width:"50%"}); $(".callbacks").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); $('.non-retina').colorbox({rel:'group5', transition:'none'}) $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); and after in handleRequestStateChange() i create my a element and assign to a div: var a = createElement('a'); //a.style.display = "block"; a.setAttribute('class','iframe'); a.setAttribute('href',"php/whois.php?P1="+oStxt.value); var divIp3 = createElement('div', 'divIp3', 'divIp3css'); var divIp31 = createElement('div', 'divIp31', 'divIp31css'); divIp3.appendChild(divIp31); divIp3.appendChild(a); a.appendChild(divIp31); The divIp31 become linkable but the href open page in a normal browser tab and not using attribute class for colorbox. Someone have an idea about? Thanks in advance AM

    Read the article

  • How can I test caching and cache busting?

    - by Nathan Long
    In PHP, I'm trying to steal a page from the Rails playbook (see 'Using Asset Timestamps' here): By default, Rails appends assets' timestamps to all asset paths. This allows you to set a cache-expiration date for the asset far into the future, but still be able to instantly invalidate it by simply updating the file (and hence updating the timestamp, which then updates the URL as the timestamp is part of that, which in turn busts the cache). It‘s the responsibility of the web server you use to set the far-future expiration date on cache assets that you need to take advantage of this feature. Here‘s an example for Apache: # Asset Expiration ExpiresActive On <FilesMatch "\.(ico|gif|jpe?g|png|js|css)$"> ExpiresDefault "access plus 1 year" </FilesMatch> If you look at a the source for a Rails page, you'll see what they mean: the path to a stylesheet might be "/stylesheets/scaffold.css?1268228124", where the numbers at the end are the timestamp when the file was last updated. So it should work like this: The browser says 'give me this page' The server says 'here, and by the way, this stylesheet called scaffold.css?1268228124 can be cached for a year - it's not gonna change.' On reloads, the browser says 'I'm not asking for that css file, because my local copy is still good.' A month later, you edit and save the file, which changes the timestamp, which means that the file is no longer called scaffold.css?1268228124 because the numbers change. When the browser sees that, it says 'I've never seen that file! Give me a copy, please.' The cache is 'busted.' I think that's brilliant. So I wrote a function that spits out stylesheet and javascript tags with timestamps appended to the file names, and I configured Apache with the statement above. Now: how do I tell if the caching and cache busting are working? I'm checking my pages with two plugins for Firebug: Yslow and Google Page Speed. Both seem to say that my files are caching: "Add expires headers" in Yslow and "leverage browser caching" in Page Speed are both checked. But when I look at the Page Speed Activity, I see a lot of requests and waiting and no 'cache hits'. If I change my stylesheet and reload, I do see the change immediately. But I don't know if that's because the browser never cached in the first place or because the cache is busted. How can I tell?

    Read the article

  • problem with custom NSProtocol and caching on iPhone

    - by TomSwift
    My iPhone app embeds a UIWebView which loads html via a custom NSProtocol handler I have registered. My problem is that resources referenced in the returned html, which are also loaded via my custom protocol handler, are cached and never reloaded. In particular, my stylesheet is cached: <link rel="stylesheet" type="text/css" href="./styles.css" /> The initial request to load the html in the UIWebView looks like this: NSString* strUrl = [NSMutableString stringWithFormat: @"myprotocol:///entry?id=%d", entryID ]; NSURL* url = [NSURL URLWithString: strUrl]; [_pCurrentWebView loadRequest: [NSURLRequest requestWithURL: url cachePolicy: NSURLRequestReloadIgnoringLocalCacheData timeoutInterval: 60 ]]; (note the cache policy is set to ignore, and I've verified this cache policy carries through to subsequent requests for page resources on the initial load) The protocol handler loads the html from a database and returns it to the client using code like this: // create the response record NSURLResponse *response = [[NSURLResponse alloc] initWithURL: [request URL] MIMEType: mimeType expectedContentLength: -1 textEncodingName: textEncodingName]; // get a reference to the client so we can hand off the data id client = [self client]; // turn off caching for this response data [client URLProtocol: self didReceiveResponse:response cacheStoragePolicy: NSURLCacheStorageNotAllowed]; // set the data in the response to our jfif data [client URLProtocol: self didLoadData:data]; [data release]; (Note the response cache policy is "not allowed"). Any ideas how I can make it NOT cache my styles.css resource? I need to be able to dynamically alter the content of this resource on subsequent loads of html that references this file. I thought clearing the shared url cache would work, but it doesnt: [[NSURLCache sharedURLCache] removeAllCachedResponses]; One thing that does work, but it's terribly inefficient, is to dynamically cache-bust the url for the stylesheet by adding a timestamp parameter: <link rel="stylesheet" type="text/css" href="./styles.css?ts=1234567890" /> To make this work I have to load my html from the db, search and replace the url for the stylesheet with a cache-busting parameter that changes on each request. I'd rather not do this. My presumption is that there is no problem if I were to load my content via the built-in HTTP protocol. In that case, I'm guessing that the UIWebView looks at any Cache-Control flags in the NSURLHTTPResponse object's http headers and abides by them. Since my NSURLResponseObject has no http headers (it's not http...) then perhaps UIWebView just decides to cached the resource (ignoring the NSURLRequest caching directive?). Ideas???

    Read the article

  • Adding a mini admin to a webpage.

    - by DADU
    Hello Picture this: you are creating a little module that people can incorporate into their website easily, for example, a little contact form. It would consist of a PHP file that outputs some HTML, a Javascript file (ajax etc.), a CSS file and a CSS skin. Now the person who doesn't know much about coding wants to integrate it on a webpage (website/index.php). We could do this with three rules of code: <link rel="stylesheet" href="module/css/module.css" /> <script src="module/js/module.js"></script> <?php require_once 'module/module.php'; ?> There's no doubt this part is questionable, right? Now when we want to add an admin for this little module, there are two options: Accessing the admin via an extra URL like website/module/admin.php and after authentication, displaying a page where the person can do all the settings. The person then goes back to index.php to see the results. Enabling the admin via an extra URL like website/module/admin.php and after authentication, redirecting back to index.php. The person can now edit the module directly (HTML5 contenteditable) and see changes live, on the webpage where everybody else will see it when the person saves the changes. Option 2 has a couple of advantages: The person doesn't have to toggle between admin and index.php. The person can see directly how it's looking at the webpage it's integrated in. The person probably feels like the module is more part of the webpage/website. Of course option 2 has some disadvantages too: Not everything works well editing it inline. The person would need to have an HTML5 compliant browser. Probably some more I can't think of right now. Now I have a few concerns that's I can't seem to see a clear answer to. How would we let the person integrate the admin on their webpage? The admin files only need to be included in index.php if the person has choosen to edit the module via the url (website/module/admin.php). But how can we do this if we have a admin.css file that belongs in the head section, an admin.php file that goes into the body, and another admin.js file that's included at the end of the body? How would we know the file that admin.php needs to redirect back to, after authentication? index.php could be any webpage with any name. Any real life website/web apps examples using this principle are welcome too. If there's something unclear, I am glad to add additional info.

    Read the article

  • jQuery: List expands on page load

    - by Hasanah
    I've been looking for something very simple: How to make a side navigation expand with animation on page load, but all the tutorial websites I usually go to don't seem to have it. The closest I could find is this jQuery sample: http://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/ I've managed to strip down the list like so: <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ $('li') .css('pointer','default') .css('list-style','none'); $('li:has(ul)') .click(function(event){ if (this == event.target) { $(this).css('list-style', (!$(this).children().is(':hidden')) ? 'none' : 'none'); $(this).children().toggle('slow'); } return false; }) .css({cursor:'pointer', 'list-style':'none'}) .children().hide(); $('li:not(:has(ul))').css({cursor:'default', 'list-style':'none'}); }); <body> <fieldset> <legend>Collapsable List Demo</legend> <ul> <li>A - F</li> <li>G - M <ul> <li>George Kent Technology Centre</li> <li>Hampshire Park</li> <li>George Kent Technology Centre</li> <li>Hampshire Park</li> </ul> </li> <li> N - R </li> <li>S - Z</li> </ul> </fieldset> My question is: Is there any way to make this list expand on page load instead of on click? I also don't need it to collapse at all; basically I need only the animating expansion. Thank you for your time and advice. :)

    Read the article

  • Why won't this Jquery run on IE?

    - by Charles Marsh
    Hello All, I have this Jquery code (function($){ $.expr[':'].linkingToImage = function(elem, index, match){ // This will return true if the specified attribute contains a valid link to an image: return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i)); }; $.fn.imgPreview = function(userDefinedSettings){ var s = $.extend({ /* DEFAULTS */ // CSS to be applied to image: imgCSS: {}, // Distance between cursor and preview: distanceFromCursor: {top:2, left:2}, // Boolean, whether or not to preload images: preloadImages: true, // Callback: run when link is hovered: container is shown: onShow: function(){}, // Callback: container is hidden: onHide: function(){}, // Callback: Run when image within container has loaded: onLoad: function(){}, // ID to give to container (for CSS styling): containerID: 'imgPreviewContainer', // Class to be given to container while image is loading: containerLoadingClass: 'loading', // Prefix (if using thumbnails), e.g. 'thumb_' thumbPrefix: '', // Where to retrieve the image from: srcAttr: 'rel' }, userDefinedSettings), $container = $('<div/>').attr('id', s.containerID) .append('<img/>').hide() .css('position','absolute') .appendTo('body'), $img = $('img', $container).css(s.imgCSS), // Get all valid elements (linking to images / ATTR with image link): $collection = this.filter(':linkingToImage(' + s.srcAttr + ')'); // Re-usable means to add prefix (from setting): function addPrefix(src) { return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2'); } if (s.preloadImages) { (function(i){ var tempIMG = new Image(), callee = arguments.callee; tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr)); tempIMG.onload = function(){ $collection[i + 1] && callee(i + 1); }; })(0); } $collection .mousemove(function(e){ $container.css({ top: e.pageY + s.distanceFromCursor.top + 'px', left: e.pageX + s.distanceFromCursor.left + 'px' }); }) .hover(function(){ var link = this; $container .addClass(s.containerLoadingClass) .show(); $img .load(function(){ $container.removeClass(s.containerLoadingClass); $img.show(); s.onLoad.call($img[0], link); }) .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) ); s.onShow.call($container[0], link); }, function(){ $container.hide(); $img.unbind('load').attr('src','').hide(); s.onHide.call($container[0], this); }); // Return full selection, not $collection! return this; }; })(jQuery); It works perfectly in all browsers apart from IE, which it does nothing, no errors, no clues? I have a funny feeling IE doesn't support attr? Can anyone offer any advice?

    Read the article

  • Background-image won't change using jquery in IE6

    - by slav
    There is a panel on my page with no default background-image css. On load it is set with jquery to an initial image, waits for 10 seconds then loads a random image out of some predetermined images. There are previous and next buttons which allow you to cycle through the images. In ie6 the initial image loads and then a random image also loads after 10 seconds, however pressing prev/next causes the background to become white and the images aren't loaded. With alerts I was able to find that it's still keeping track of the position and url of the image it's supposed to load, but just won't load it. Here is the code below. <script type="text/javascript"> var facts = new Array(); var position; $(document).ready(function() { <xsl:for-each select="$currentPage/ancestor-or-self::node[@level=1]/../node[@nodeName='Fun Fact Folder']/node"> facts[<xsl:value-of select="position()" />] = '<xsl:value-of select="." />'; </xsl:for-each> if(window.location.pathname == "/homepage.aspx" || window.location.pathname == "/") { $(".fun_facts_bg").css("background-image", "url(images/fun_fact_homepage.JPG)"); setTimeout("randomFact()",10000); } else { randomFact(); } }); function randomFact() { $("a.previous_button").css("display", "block"); $("a.next_button").css("display", "block"); position = Math.ceil(Math.random() * (facts.length - 1)); changeFact(0); } function changeFact(increment) { position = checkPosition(position, increment); $(".fun_facts_bg").css("background-image", "url(" + facts[position] + ")"); } <xsl:text disable-output-escaping="yes">&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!-- function checkPosition(currentPos, increment) { currentPos = currentPos + increment; if (currentPos &gt; facts.length - 1) { currentPos = 1; } else if (currentPos &lt; 1) { currentPos = facts.length - 1; } return currentPos; } //--&gt;&lt;!]]&gt;</xsl:text> </script> <a class="previous_button" href="javascript:void(0);" onclick="changeFact(-1);"> <a class="next_button" href="javascript:void(0);" onclick="changeFact(1);">

    Read the article

  • problem in saving drag&drop object in database

    - by Mac Taylor
    hey guys i made a script inspired by wordpress widgets'page to drag&drop blocks of my sites but problem is in saving the position after droping this is jquery code , i used to do the above target : <script type="text/javascript" >$(function(){ $('.widget') .each(function(){ $(this).hover(function(){ $(this).find('h4').addClass('collapse'); }, function(){ $(this).find('h4').removeClass('collapse'); }) .find('h4').hover(function(){ $(this).find('.in-widget-title').css('visibility', 'visible'); }, function(){ $(this).find('.in-widget-title').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.widget-inside').toggle(); //Save state on change of collapse state of panel updateWidgetData(); }) .end() .find('.in-widget-title').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h4', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function(event, ui){ //Firefox, Safari/Chrome fire click event after drag is complete, fix for that if($.browser.mozilla || $.browser.safari) $(ui.item).find('.widget-inside').toggle(); }, stop: function(event, ui){ ui.item.css({'top':'0','left':'0'}); //Opera fix if(!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); function updateWidgetData(){ var items=[]; $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){ if(response=="success") $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000); setTimeout(function(){ $('#console').fadeOut(1000); }, 2000); }); } </script> and a simple php file but problem is its not sending data to target php file is there anything wrong with my code ?

    Read the article

  • How can I implement a site with ASP.NET MVC without using Visual Studio?

    - by Cheeso
    I have seen ASP.NET MVC Without Visual Studio, which asks, Is it possible to produce a website based on ASP.NET MVC, without using Visual Studio? And the accepted answer is, yes. Ok, next question: how? Here's an analogy. If I want to create an ASP.NET Webforms page, I load up my favorite text editor, create a file named Something.aspx. Then I insert into that file, some boilerplate: <%@ Page Language="C#" Debug="true" Trace="false" Src="Sourcefile.cs" Inherits="My.Namespace.ContentsPage" %> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title goes here </title> <link rel="stylesheet" type="text/css" href="css/style.css"></link> <style type="text/css"> #elementid { font-size: 9pt; color: Navy; ... more css ... } </style> <script type="text/javascript" language='javascript'> // insert javascript here. </script> </head> <body> <asp:Literal Id='Holder' runat='server'/> <br/> <div id='msgs'></div> </body> </html> Then I also create the Sourcefile.cs file: namespace My.Namespace { using System; using System.Web; using System.Xml; // etc... public class ContentsPage : System.Web.UI.Page { protected System.Web.UI.WebControls.Literal Holder; void Page_Load(Object sender, EventArgs e) { // page load logic here } } } And that is a working ASPNET page, created in a text editor. Drop it into an IIS virtual directory, and it's working. What do I have to do, to make a basic, hello, World ASPNET MVC app, in a text editor? (without Visual Studio) Suppose I want a basic MVC app with a controller, one view, and a simple model. What files would I need to create, and what would go into them?

    Read the article

  • How can I implement ASP.NET MVC without using Visual Studio?

    - by Cheeso
    I have seen ASP.NET MVC Without Visual Studio, which asks, Is it possible to produce a website based on ASP.NET MVC, without using Visual Studio? And the accepted answer is, yes. Ok, next question: how? Here's an analogy. If I want to create an ASP.NET Webforms page, I load up my favorite text editor, create a file named Something.aspx. Then I insert into that file, some boilerplate: <%@ Page Language="C#" Debug="true" Trace="false" Src="Sourcefile.cs" Inherits="My.Namespace.ContentsPage" %> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title goes here </title> <link rel="stylesheet" type="text/css" href="css/style.css"></link> <style type="text/css"> #elementid { font-size: 9pt; color: Navy; ... more css ... } </style> <script type="text/javascript" language='javascript'> // insert javascript here. </script> </head> <body> <asp:Literal Id='Holder' runat='server'/> <br/> <div id='msgs'></div> </body> </html> Then I also create the Sourcefile.cs file: namespace My.Namespace { using System; using System.Web; using System.Xml; // etc... public class ContentsPage : System.Web.UI.Page { protected System.Web.UI.WebControls.Literal Holder; void Page_Load(Object sender, EventArgs e) { // page load logic here } } } And that is a working ASPNET page, created in a text editor. Drop it into an IIS virtual directory, and it's working. What do I have to do, to make a basic, hello, World ASPNET MVC app, in a text editor? (without Visual Studio)

    Read the article

  • Why does firefox round-trip to the server to determine whether my files are modifed?

    - by erikkallen
    I have some static content on my web site that I have set up caching for (using Asp.NET MVC). According to Firebug, the first time I open the page, Firefox sends this request: GET /CoreContent/Core.css?asm=0.7.3614.34951 Host: 127.0.0.1:3916 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729) Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://127.0.0.1:3916/Edit/1/101 Cookie: .ASPXAUTH=52312E5A802C1A079E2BA29AA2BFBC5A38058977B84452D62ED52855D4164659B4307661EC73A307BFFB2ED3871C67CB3A9AAFDB3A75A99AC0A21C63A6AADE9A11A7138C672E75125D9FF3EFFBD9BF62 Pragma: no-cache Cache-Control: no-cache Which my server replies to with this: Server: ASP.NET Development Server/9.0.0.0 Date: Mon, 23 Nov 2009 18:44:41 GMT X-AspNet-Version: 2.0.50727 X-AspNetMvc-Version: 1.0 Cache-Control: public, max-age=31535671 Expires: Tue, 23 Nov 2010 18:39:12 GMT Last-Modified: Mon, 23 Nov 2009 18:39:12 GMT Vary: * Content-Type: text/css Content-Length: 15006 Connection: Close So far, so good. However, if I refresh Firefox (not a cache-clearing refresh, just a normal one), during that refresh cycle Firefox will once again go to the server with this request: GET /CoreContent/Core.css?asm=0.7.3614.34951 Host: 127.0.0.1:3916 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729) Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://127.0.0.1:3916/Edit/1/101 Cookie: .ASPXAUTH=52312E5A802C1A079E2BA29AA2BFBC5A38058977B84452D62ED52855D4164659B4307661EC73A307BFFB2ED3871C67CB3A9AAFDB3A75A99AC0A21C63A6AADE9A11A7138C672E75125D9FF3EFFBD9BF62 If-Modified-Since: Mon, 23 Nov 2009 18:39:20 GMT Cache-Control: max-age=0 to which my server responds 304 Not Modified. Why does Firefox issue this second request? In the first response, I said that the cache does not expire for a year (I intend to use query parameters whenever things change). Do I have to add another response header to prevent this extra roundtrip? Edit: It does not matter whether I press refresh, or whether I go to the page again (or a different URL, which references the same external files). Firefox does the same again. Also, I don't claim this to be a bug in FF, I just wonder if there is another header I can set which means "This document will never change, don't bother me again".

    Read the article

  • Multiple instances of this carousel on a single page - can't get it to work

    - by Andy
    This code comes from a tutorial so it's not originally my own work. What I am trying to do is implement this several times on a single page. I have tried and so far failed - by numbering the id "carousel" and so forth. Any help would be seriously appreciated. I'm tearing my hair out. http://jsfiddle.net/AndyMP/zcKDV/5/ For completeness.. this is the carousel JQuery as it stands. //rotation speed and timer var speed = 5000; var run = setInterval('rotate()', speed); //grab the width and calculate left value var item_width = $('#slides li').outerWidth(); var left_value = item_width * (-1); //move the last item before first item, just in case user click prev button $('#slides li:first').before($('#slides li:last')); //set the default item to the correct position $('#slides ul').css({'left' : left_value}); //if user clicked on prev button $('#prev').click(function() { //get the right position var left_indent = parseInt($('#slides ul').css('left')) + item_width; //slide the item $('#slides ul').animate({'left' : left_indent}, 200,function(){ //move the last item and put it as first item $('#slides li:first').before($('#slides li:last')); //set the default item to correct position $('#slides ul').css({'left' : left_value}); }); //cancel the link behavior return false; }); //if user clicked on next button $('#next').click(function() { //get the right position var left_indent = parseInt($('#slides ul').css('left')) - item_width; //slide the item $('#slides ul').animate({'left' : left_indent}, 200, function () { //move the first item and put it as last item $('#slides li:last').after($('#slides li:first')); //set the default item to correct position $('#slides ul').css({'left' : left_value}); }); //cancel the link behavior return false; }); //if mouse hover, pause the auto rotation, otherwise rotate it $('#slides').hover( function() { clearInterval(run); }, function() { run = setInterval('rotate()', speed); } ); //a simple function to click next link //a timer will call this function, and the rotation will begin :) function rotate() { $('#next').click(); }

    Read the article

  • jquery show hidden div

    - by Fahad
    Firstly, I'm sort of embarrassed asking about this, so many people have already asked this question but even after having gone through so many posts, I'm unable to achieve what I want. Basically, a div, initially hidden, has to be displayed on a button click. I tried hiding the div using display:none and hide() and then displaying it using show(), toggle(), and css("display","block"). Using all sorts of combinations of the above, I was still unable to get the result. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="jQuery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#one').hide(); $('#Button1').click(function () { $('#one').toggle(500); }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="one" style="height: 20px;width:200px; background-color: Red; "> </div> <asp:Button ID="Button1" runat="server" Text="Show" /> </form> </body> </html> On button click, the div is shown for a brief second before it disappears again. The same thing happens if I use show() instead of toggle() in the above code. Again the same thing if I set style="display:none" to the div instead of using hide() and then use show() or toggle(). I also tried using $('#one').css("display","block"); but again, the same result. Can anyone please tell me where I'm going wrong. Just started learning jQuery and it is really frustrating when something apparently so simple will not work. Thanks in advance. :)

    Read the article

  • how do I make my submenu position dynamic based on the distance to the edge of the window?

    - by Mario Antoci
    I'm trying to write a jQuery script that will find the distance to the right edge of the browser window from my css class element and then position the child submenu dropdowns to the right or left depending on the available space to the right. Also it needs to revert to the default settings on hoverout. Here is what I have so far but it's not calculating properly. $(document).ready(function(){ $('#dnnMenu .subLevel').hover(function(){ if ($(window).width() - $('#dnnMenu .subLevel').offset().left - '540' >= '270') { $('#dnnMenu .subLevelRight').css('left', '270px');} else {$('#dnnMenu .subLevelRight').css('left', '-270px');} }); $(document).ready(function () { function HoverOver() { $(this).addClass('hover'); } function HoverOut() { $(this).removeClass('hover'); } var config = { sensitivity: 2, interval: 100, over: HoverOver, timeout: 100, out: HoverOut }; $("#dnnMenu .topLevel > li.haschild").hoverIntent(config); $(".subLevel li.haschild").hover(HoverOver, HoverOut); }); Basically I tried to take the width of the current window, minus the distance to the left edge of the browser of the first level submenu, minus the width of both elements together which would equal 540px, to calculate the distance to the right edge of the window when the first level submenu is hovered over. if the distance to the right of my first level submenu element is less than 540px then the second level sub menu css property is changed to position to the left instead of right. I also know that it needs to revert back to default after hover out so it can recalculate the distance from other positions within the menu structure and still have those second level submenus with enough room to still display on the right of the first level. here is css for the elements in question. #dnnMenu .subLevel{ display: none; position: absolute; margin: 0; z-index: 1210; background: #639ec8; text-transform: none;} #dnnMenu .subLevelRight{ position: absolute; display: none; left: 270px; top: 0px;} The site's not live yet and I tried to create a jsfiddle but it doesn't look right. Any help would be greatly appreciated! Best Regards, Mario

    Read the article

  • scrollTo (jQuery) won't work in firefox

    - by William
    For some reason, firefox seems to ignore my scrollTo function even though it works in chrome and safari. Here's an example link: http://blog.rainbird.me/post/2358248459/blowholes-are-awesome Chrome and Safari will automatically scroll to the top of the image (with an offset of 20 pixels) It doesn't work in firefox. I'm baffled! code: $(document).ready(function() { $(".photoShell img").lazyload({ placeholder: "http://william.rainbird.me/boston-polaroid/white.gif", threshold: 200 }); window.viewport = { height: function() { return $(window).height(); }, width: function() { return $(window).width(); }, scrollTop: function() { return $(window).scrollTop(); }, scrollLeft: function() { return $(window).scrollLeft(); } }; $(".photoShell img").hide(); $(".photoShell .caption").hide(); $(".photoShell img").load(function() { var maxWidth = viewport.width() - 40; // Max width for the image if(maxWidth > 960){ maxWidth = 960; } var maxHeight = viewport.height() - 50; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image width = width * ratio; // Reset width to match scaled image } // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } $(this).parents('div.photoShell').css("width", $(this).width() + 22); $(this).parents('div.photoShell').addClass('loaded'); $(this).next(".caption").show(); var scrollNum = $(this).parents('div.photoShell').offset().top; $.scrollTo(scrollNum - 20, {duration: 700, axis:"y"}); $(this).fadeIn("slow"); }).each(function() { // trigger the load event in case the image has been cached by the browser if(this.complete) $(this).trigger('load'); });

    Read the article

  • Video playback with jQuery Mobile and Phonegap

    - by aritchie
    I'm fairly new to mobile apps, so am trying to knock up a simple video player using Phonegap and jQuery Mobile. The problem is, jQuery mobile appears to be blocking the video playback for some reason. To troubleshoot I stripped it right back to the following HTML, but get the same result, ie a black rectangle where the video should be, but no video playback or controls. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> <script type="text/javascript" src="cordova-2.2.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.mobile-1.2.0.js"></script> <title></title> </head> <body> <div> <video controls autoplay> <source src="video/video1.mp4" type="video/mp4" > </video> </div> </body> </html> If I remove the link to jquery.mobile-1.2.0.js the video shows up and plays, otherwise, just the black rectangle. I don't know jQuery mobile at all, but searching in the js for a reference to the video elements doesn't show up, so I've no idea what is blocking it. The code works fine in Chrome and Firefox. There are no console messages in Xcode. I also tried hooking up to http://debug.phonegap.com/ but this gave no error messages either. Any ideas??

    Read the article

  • Issue with my wordpress functions.php script

    - by iMayne
    Hello peeps. Im having an issues when activating my theme in wordpress. I got this error message: "Parse error: syntax error, unexpected $end in C:\xampp\htdocs\xampp\wordpress\wp-content\themes\xit\functions.php on line 223". Whats wrong, I totally dont understand. The script of the php is: <?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h2>', 'after_title' => '</h2>', )); function content($num) { $theContent = get_the_content(); $output = preg_replace('/<img[^>]+./','', $theContent); $limit = $num+1; $content = explode(' ', $output, $limit); array_pop($content); $content = implode(" ",$content)."..."; echo $content; } function post_is_in_descendant_category( $cats, $_post = null ) { foreach ( (array) $cats as $cat ) { // get_term_children() accepts integer ID only $descendants = get_term_children( (int) $cat, 'category'); if ( $descendants && in_category( $descendants, $_post ) ) return true; } return false; } //custom comments function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-author vcard"> <div class="comment-meta commentmetadata"> <?php echo get_avatar($comment,$size='32',$default='http://www.gravatar.com/avatar/61a58ec1c1fba116f8424035089b7c71?s=32&d=&r=G' ); ?> <?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?> <br /><?php printf(__('<strong>%s</strong> says:'), get_comment_author_link()) ?><?php edit_comment_link(__('(Edit)'),' ','') ?></div> </div> <?php if ($comment->comment_approved == '0') : ?> <em><?php _e('Your comment is awaiting moderation.') ?></em> <br /> <?php endif; ?> <div class="text"><?php comment_text() ?></div> <div class="reply"> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </div> </div> <?php } add_action('admin_menu', 'xit_theme_page'); function xit_theme_page () { if ( count($_POST) > 0 && isset($_POST['xit_settings']) ) { $options = array ( 'style','logo_img','logo_alt','logo_txt', 'logo_tagline', 'tagline_width', 'contact_email','ads', 'advertise_page', 'twitter_link', 'facebook_link', 'flickr', 'about_tit', 'about_txt', 'analytics'); foreach ( $options as $opt ) { delete_option ( 'xit_'.$opt, $_POST[$opt] ); add_option ( 'xit_'.$opt, $_POST[$opt] ); } } add_theme_page(__('Xit Options'), __('Xit Options'), 'edit_themes', basename(__FILE__), 'xit_settings'); } function xit_settings () {?> <div class="wrap"> <h2>XIT Options Panel</h2> <form method="post" action=""> <table class="form-table"> <!-- General settings --> <tr> <th colspan="2"><strong>General Settings</strong></th> </tr> <tr valign="top"> <th scope="row"><label for="style">Theme Color Scheme</label></th> <td> <select name="style" id="style"> <option value="pink.css" <?php if(get_option('xit_style') == 'pink.css'){?>selected="selected"<?php }?>>pink.css</option> <option value="blue.css" <?php if(get_option('xit_style') == 'blue.css'){?>selected="selected"<?php }?>>blue.css</option> <option value="orange.css" <?php if(get_option('xit_style') == 'orange.css'){?>selected="selected"<?php }?>>orange.css</option> </select> </td> </tr> <tr valign="top"> <th scope="row"><label for="logo_img">Logo image (full path to image)</label></th> <td> <input name="logo_img" type="text" id="logo_img" value="<?php echo get_option('xit_logo_img'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="logo_alt">Logo image ALT text</label></th> <td> <input name="logo_alt" type="text" id="logo_alt" value="<?php echo get_option('xit_logo_alt'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="logo_txt">Text logo</label></th> <td> <input name="logo_txt" type="text" id="logo_txt" value="<?php echo get_option('xit_logo_txt'); ?>" class="regular-text" /> <br /><em>Leave this empty if you entered an image as logo</em> </td> </tr> <tr valign="top"> <th scope="row"><label for="logo_tagline">Logo Tag Line</label></th> <td> <input name="logo_tagline" type="text" id="logo_tagline" value="<?php echo get_option('xit_logo_tagline'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="tagline_width">Tag Line Box Width (px)</label><br /><em style="font-size:11px">Default width: 300px</em></th> <td> <input name="tagline_width" type="text" id="tagline_width" value="<?php echo get_option('xit_tagline_width'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="contact_email">Email Address for Contact Form</label></th> <td> <input name="contact_email" type="text" id="contact_email" value="<?php echo get_option('xit_contact_email'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="twitter_link">Twitter link</label></th> <td> <input name="twitter_link" type="text" id="twitter_link" value="<?php echo get_option('xit_twitter_link'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="facebook_link">Facebook link</label></th> <td> <input name="facebook_link" type="text" id="facebook_link" value="<?php echo get_option('xit_facebook_link'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="flickr">Flickr Photostream</label></th> <td> <select name="flickr" id="flickr"> <option value="yes" <?php if(get_option('xit_flickr') == 'yes'){?>selected="selected"<?php }?>>Yes</option> <option value="no" <?php if(get_option('xit_flickr') == 'no'){?>selected="selected"<?php }?>>No</option> </select> <br /><em>Make sure you have FlickrRSS plugin activated if you choose to enable Flickr Photostream</em> </td> </tr> <!-- Sidebar ABout Box--> <tr> <th colspan="2"><strong>Sidebar About Box</strong></th> </tr> <tr valign="top"> <th scope="row"><label for="about_tit">Title</label></th> <td> <input name="about_tit" type="text" id="about_tit" value="<?php echo get_option('xit_about_tit'); ?>" class="regular-text" /> </td> </tr> <tr valign="top"> <th scope="row"><label for="about_txt">Text</label></th> <td> <textarea cols="60" rows="5" name="about_txt" type="text" id="about_txt" class="regular-text" /><?php echo get_option('xit_about_txt'); ?></textarea> </td> </tr> <!-- Ads Box Settings --> <tr> <th colspan="2"><strong>Ads Box Settings</strong></th> </tr> <tr> <th><label for="ads">Ads Section Enabled:</label></th> <td> <select name="ads" id="ads"> <option value="yes" <?php if(get_option('xit_ads') == 'yes'){?>selected="selected"<?php }?>>Yes</option> <option value="no" <?php if(get_option('xit_ads') == 'no'){?>selected="selected"<?php }?>>No</option> </select> <br /><em>Make sure you have AdMinister plugin activated and have the position "Sidebar" created within the plugin.</em> </td> </tr> <tr valign="top"> <th scope="row"><label for="advertise_page">Advertise Page</label></th> <td> <?php wp_dropdown_pages("name=advertise_page&show_option_none=".__('- Select -')."&selected=" .get_option('xit_advertise_page')); ?> </td> </tr> <!-- Google Analytics --> <tr> <th><label for="ads">Google Analytics code:</label></th> <td> <textarea name="analytics" id="analytics" rows="7" cols="70" style="font-size:11px;"><?php echo stripslashes(get_option('xit_analytics')); ?></textarea> </td> </tr> </table> <p class="submit"> <input type="submit" name="Submit" class="button-primary" value="Save Changes" /> <input type="hidden" name="xit_settings" value="save" style="display:none;" /> </p> </form> </div> <? }?> <?php function get_first_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "/images/default.jpg"; } return $first_img; } ?> The last line is line 223.

    Read the article

  • IE9, HTML5 and truck load of other stuff happening around the web

    - by Harish Ranganathan
    First of all, I haven’t been updating this blog as regularly as it used to be.  Primarily, due to the fact was I was visiting a lot of cities talking about SharePoint, Web Matrix, IE9 and few other stuff.  IE9 is my new found love and I simply think we have done great work in improving the browser and browsing experiences for our users. This post would talk about IE, general things happening around the web and few misconceptions around IE (I had earlier written about IE8 and common myths When you think about the way web has transformed, its truly amazing.  Rewind back to late 90s and early 2000s, web was a luxury.  There were lot of desktop applications running around and web applications was starting to pick up.  Primarily reason was not a lot of folks were into web development and the areas of web were confined to HTML and JavaScript.  CSS was around here and there but no one took it so seriously.  XML, XSLT was fast picking up and contributed to decent web development techniques. So as a web developer all we had to worry about was, building good looking websites which worked well with IE6 and occasionally with Safari.  Firefox was  not even in the picture then and so was Chrome.  But with the various arms of W3C consortium and other bodies working actively on stuff like CSS, SVG and XHTML, few more areas came into picture when it comes to browsers supporting standards.  IE6 for sure wasn’t up to the speed and the main issue we were tackling then was privacy and piracy.  We did invest a lot of our efforts to curb piracy and one of the steps into it was that, IE7 the next version of IE would install only on genuine windows machines.  What this means, is that, people who were running pirated windows xp knowingly/unknowingly could not install IE7 and the limitations of IE6 really hurt them.  One more thing of importance is that, if you were running pirated windows, lots of chances that you didn’t get the security updates and thereby were vulnerable to run viruses/trojans on your system. Many of them actually block using IE in the first place and make it difficult to browse.  SP2 came as a big boon but again was there only for genuine windows machines. With Firefox coming as a free install and also heavily pushed by Google then, it was natural that people would try an alternative.  By then, we had started working on IE8 supporting the best standards (note HTML5, CSS 2.1 and other specs were then work in progress.  they are still) Later, Google in their infinite wisdom realized that with Firefox they were going nowhere and they released Chrome.  Now, they heavily push Chrome even for Firefox users, which is natural since its their browser. In the meanwhile, these browsers push their updates as mandatory and therefore have a very short lifecycle to add enhancements and support for stuff like CSS etc., Meanwhile, when IE8 came out, it really was the best standards supported browser and a lot of people saw our efforts in improving our browser. HTML5 is the buzz word in the industry and there is a lot of noise being made by many browsers claiming their support for it.  IE8 doesn’t have much support for HTML5.  But, with IE9 Beta, we have great support for many of HTML5 specifications.  Note that, HTML5 is still work under progress and one of the board of members working on the spec has mentioned that these specs might change and relying on them heavily is dangerous.  But, some of the advances such as video tag, etc., are indeed supported in IE9 Beta.  IE9 Beta also has full hardware acceleration support which other browsers don’t have. IE8 had advanced security features such as smartscreen filter, in-private browsing, anti-phishing and a lot of other stuff.  IE9 builds on top of these with the best in town security standards as well as support for HTML5, CSS3, Hardware acceleration, SVG and many other advancements in browser.  Read more at http://www.beautyoftheweb.com/#/highlights/html5  To summarize, IE9 Beta is really innovative and you should try it to believe what it provides.  You can visit http://www.beautyoftheweb.com/  to install as well as read more on this. Cheers !!!

    Read the article

  • MVC Portable Areas &ndash; Deploying Static Files

    - by Steve Michelotti
    This is the second post in a series related to build and deployment considerations as I’ve been exploring MVC Portable Areas: #1 – Using Web Application Project to build portable areas #2 – Conventions for deploying portable area static files #3 – Portable area static files as embedded resources As I’ve been digging more into portable areas, one of the things I’ve liked best is the deployment story which enables my *.aspx, *.ascx pages to be compiled into the assembly as embedded resources rather than having to maintain all those files separately. In traditional web forms, that was always the thing to prevented developers from utilizing *.ascx user controls across projects (see this post for using portable areas in web forms).  However, though the aspx pages are embedded, the supporting static files (e.g., images, css, javascript) are *not*. Most of the demos available online today tend to brush over this issue and focus solely on the aspx side of things. But to create truly robust portable areas, it’s important to have a good story for these supporting files as well.  I’ve been working with two different approaches so far (of course I’d really like to hear if other people are using alternatives). Scenario For the approaches below, the scenario really isn’t that important. It could be something as trivial as this partial view: 1: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 2: <img src="<%: Url.Content("~/images/arrow.gif") %>" /> Hello World! The point is that there needs to be careful consideration for *any* scenario that links to an external file such as an image, *.css, *.js, etc. In the example shown above, it uses the Url.Content() method to convert to a relative path. But this method won’t necessary work depending on how you deploy your portable area. One approach to address this issue is to build your portable area project with MSDeploy/WebDeploy so that it is packaged properly before incorporating into the host application. All of the *.cs files are removed and the project is ready for xcopy deployment – however, I do *not* need the “Views” folder since all of the mark up has been compiled into the assembly as embedded resources. Now in the host application we create a folder called “Modules” and deploy any portable areas as sub-folders under that: At this point we can add a simple assembly reference to the Widget1.dll sitting in the Modules\Widget1\bin folder. I can now render the portable image in my view like any other portable area. However, the problem with that is that the view results in this:   It couldn’t find arrow.gif because it looked for /images/arrow.gif and it was *actually* located at /images/Modules/Widget1/images/arrow.gif. One solution is to make the physical location of the portable configurable from the perspective of the host like this: 1: <appSettings> 2: <add key="Widget1" value="Modules\Widget1"/> 3: </appSettings> Using the <appSettings> section is a little cheesy but it could be better formalized into its own section. In fact, if were you willing to rely on conventions (e.g., “Modules\{areaName}”) then then config could be eliminated completely. With this config in place, we could create our own Html helper method called Url.AreaContent() that “wraps” the OOTB Url.Content() method while simply pre-pending the area location path: 1: public static string AreaContent(this UrlHelper urlHelper, string contentPath) 2: { 3: var areaName = (string)urlHelper.RequestContext.RouteData.DataTokens["area"]; 4: var areaPath = (string)ConfigurationManager.AppSettings[areaName]; 5:   6: return urlHelper.Content("~/" + areaPath + "/" + contentPath); With these two items in place, we just change our Url.Content() call to Url.AreaContent() like this: 1: <img src="<%: Url.AreaContent("/images/arrow.gif") %>" /> Hello World! and the arrow.gif now renders correctly:     Since we’re just using our own Url.AreaContent() rather than the built-in Url.Content(), this solution works for images, *.css, *.js, or any externally referenced files.  Additionally, any images referenced inside a css file will work provided it’s a relative reference and not an absolute reference. An alternative to this approach is to build the static file into the assembly as embedded resources themselves. I’ll explore this in another post (linked at the top).

    Read the article

< Previous Page | 324 325 326 327 328 329 330 331 332 333 334 335  | Next Page >