Search Results

Search found 40441 results on 1618 pages for 'function templates'.

Page 293/1618 | < Previous Page | 289 290 291 292 293 294 295 296 297 298 299 300  | Next Page >

  • Waiting until one event has happened before moving onto the next.

    - by jaasum
    I currently have a scrolling anchor animation that also adds an "active" class to the anchor clicked. I am trying to fit the below function into the works as well, so say someone clicks "anchor 1", "anchor 1" will get an active class and the window will scroll to that location. But, after that has happened say the user manually begins scrolling down the page, I want the active class to be removed. The problem I am running up against now is that the below function will happen when the scrolling animation from a clicked anchor is taking place. How can I disable this only when the window is being scrolled from a clicked anchor? $(window).scroll(function() { $('a[href^=#]').removeClass('active'); }); Here is the scrolling anchor script I am working with. /******* *** Anchor Slider by Cedric Dugas *** *** Http://www.position-absolute.com *** Never have an anchor jumping your content, slide it. Don't forget to put an id to your anchor ! You can use and modify this script for any project you want, but please leave this comment as credit. *****/ jQuery.fn.anchorAnimate = function(settings) { settings = jQuery.extend({ speed : 500 }, settings); return this.each(function(){ var caller = this $(caller).click(function (event) { event.preventDefault() var locationHref = window.location.href var elementClick = $(caller).attr("href") var destination = $(elementClick).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, 'easeOutCubic', function() { window.location.hash = elementClick }); return false; }) }) } And lastly, my jQuery // Scrolling Anchors $('[href^=#]').anchorAnimate(); // Active Class For Clicked Anchors var anchorscroll = $('a[href^=#]') anchorscroll.click(function(){ var anchorlocation = $(this).attr("href"); anchorscroll.removeClass('active'); $(this).addClass('active'); $('a[href='+anchorlocation+']').addClass('active'); });

    Read the article

  • Simple jQuery syntax help, don't know where I've gone wrong

    - by Jascination
    I'm having trouble with a jQuery code at the moment, I know WHERE the problem lies, but I don't know what the problem is exactly. Probably very basic, but I'm new to this. You can see a (non)working fiddle here: http://www.jsfiddle.net/CvZeQ/ Basically I want to set different .click function based on whatever is selected (I have 5 image maps, each with a different #mapname, and want each to pertain to a different variable (answer1, answer2, answer3...) so as to store the selected 'answer' for each map.) Here is the code I'm using for one of the maps: $(window).load(function(){ //Get cookies when page loaded var useranswers=$.cookie('survery'); useranswers= JSON.parse (useranswers); // do something with previous answers //#shape functions $('#shape area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } ).click( function(e){ $('img.selected-region').removeClass('selected-region'); }, function(e){ $('#'+ this.alt).addClass('selected-region'); }, function(e){ var answer1 = $(this).attr("class"); }); }); I know the problem lies somewhere with the .click function, but I'm not entirely sure what I've done wrong. Any help would be greatly appreciated.

    Read the article

  • facebook comments ajax

    - by Shunsho
    I have a function that load a jquery ui accordion (differents accordions based on different id) When I click on the tab titled "Facebook Comments" I do: $("#myaccordion").bind('accordionchange', function(event, ui) { id = $("#myaccordion").data('id'); switch (ui.newHeader.text()) { case "Facebook Comments": displayFb(id); break; } }); The "displayFB" function is: function displayFb(id){ $.get('/fbcomments/' + id, function(data) { $("#facecomm").append(data); }); } Where www.myweb.com/fbcomments/id is: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-comments" data-href="<?php echo '/fbcomments/'.$id ?>" data-num-posts="10" data-width="220"></div> When I load the homepage, then choose an accordion, then open a Facebook Comments, it works perfect. If I reload the page and choose another accordion, work perfect again. The problem is when I choose another accordion or the same again without reload the whole page. The accordions loads very well, all the data on them (some tabs of images, text, videos, etc), but the facebook comments don't appear. I tried: loading the #fb-root and facebook comment <script> on the main layout....doesn't work. adding FB.XFBML.parse(); into displayFB function....doesn't work adding FB.XFBML.parse(); into a $(document).ready(function(){} ...doesn't work. Thank you for reading and try to help!!

    Read the article

  • jquery attr problem on firefox

    - by Tomas
    hello, I'm doing full screen background change system with jquery. When enter to site makes full screen size default background, and when click button must change background. Everythink works fine on opera! But FireFox nothink happend. I think problem is with attr function, please help found problem. All this you can see in http://www.hiphopdance.lt $(document).ready(function(){ //default actions var now_img="images/bg.jpg"; resize(1600,900,"#bgimg",now_img); $(window).bind("resize", function() { resize(1600,900,"#bgimg"); }); //default actions end //clicks $('li#red').click(function(){ $("img#bgimg").attr({src:'http://www.hiphopdance.lt/images/redbg.jpg'}); resize(1024,683,"#bgimg"); $(window).bind("resize", function() { resize(1024,683,"#bgimg"); }); }); //end clicks //resize function start function resize(img_width,img_height,img_id) { var ratio = img_height / img_width; // Get browser window size var browserwidth = $(window).width(); var browserheight = $(window).height(); // Scale the image if ((browserheight/browserwidth) > ratio){ $(img_id).height(browserheight); $(img_id).width(browserheight / ratio); } else { $(img_id).width(browserwidth); $(img_id).height(browserwidth * ratio); } // Center the image $(img_id).css('left', (browserwidth - $(img_id).width())/2); $(img_id).css('top', (browserheight - $(img_id).height())/2); }; //resize function end });

    Read the article

  • jQuery relative positioned hover

    - by danixd
    I want a link to the next or previous image to appear when hovering over the main image, only I want the next link to appear when hovered over the right hand side, and previous on the left. I have looked at jQuery's .position() and I don't think I am understanding it very well. At the moment all I have is general mouseenter/mouseleave events, which show both links when the image is hovered. jQuery(document).ready(function($) { $('.nav-controls a').hide(); $('#slideshow').mouseenter(function() { $('.nav-controls a').fadeIn(500); }); $('#slideshow').mouseleave(function() { $('.nav-controls a').fadeOut(500); }); }); I'd image it to be something like: jQuery(document).ready(function($) { $('.nav-controls a').hide(); var image = $('#slideshow'); var left = image.position().left(0); var right = image.position().left(50%); left.mouseenter(function() { $('.nav-controls a.previous').fadeIn(500); }); left.mouseleave(function() { $('.nav-controls a.previous').fadeOut(500); }); right.mouseenter(function() { $('.nav-controls a.next').fadeIn(500); }); right.mouseleave(function() { $('.nav-controls a.next').fadeOut(500); }); }); Not sure if I should be using position, if I am using it correctly. Any tips would be great. Edit: I do not want to add unnecessary markup in the form of divs, for the left/right selectors.

    Read the article

  • Chrome.tabs.getSelected() doesn't work. What am I doing wrong ?

    - by warv3n
    Hi there ! I'm building my first GC extension, and I am having a problem using this function. I would like to get the url of the current tab, and to do so (after some google research, of course), I use the chrome.tabs.getSelected() function. Here it is in my code : ... socket.onopen = function(msg){ log("Welcome - status " + this.readyState); chrome.tabs.getSelected(null, function(tab){ sendUrl(tab.url); }); }; function sendUrl(tabUrl) { socket.send("#URL#"+ tabUrl); } The socket.open is a listener for the Websocket API I use in my extension. The log function print the status of the socket (1, which means it's OPEN or connected and ready to communicate, according to the Websocket API), but the chrome.tabs.getSelected() function do not seems to work, as the server do not receive anything (the socket is not the problem here, I tried to send a test message with socket.send() instead of chrome.tabs.getSelected() and the server received it). I put the permissions: ["tabs"] into the manifest.json so I can use this function. So I don't know what I am doing wrong here ? I also tried to put chrome.tab.getSelected() elsewhere in the code, but it is still not working. Any help is welcome :)

    Read the article

  • jQuery plugin design pattern for using `this` in private methods?

    - by thebossman
    I'm creating jQuery plugins using the pattern from the Plugins Authoring page: (function($) { $.fn.myPlugin = function(settings) { var config = {'foo': 'bar'}; if (settings) $.extend(config, settings); this.each(function() { // element-specific code here }); return this; }; })(jQuery); My code calls for several private methods that manipulate this. I am calling these private methods using the apply(this, arguments) pattern. Is there a way of designing my plugin such that I don't have to call apply to pass this from method to method? My modified plugin code looks roughly like this: (function($) { $.fn.myPlugin = function(settings) { var config = {'foo': 'bar'}; if (settings) $.extend(config, settings); this.each(function() { method1.apply(this); }); return this; }; function method1() { // do stuff with $(this) method2.apply(this); } function method2() { // do stuff with $(this), etc... } })(jQuery);

    Read the article

  • call FB.login() after FB.init() automatically

    - by Tobi Projectx
    i`m developing an app for Facebook. My Code: function init() { window.fbAsyncInit = function() { var appID = 'xxxxxxxxxxxxxxxxxxxxxxxxxx'; FB.init({ appId: appID, status: true, cookie: true, xfbml: true}); login(); }; (function() { var e = document.createElement("script"); e.async = true; e.src = "https://connect.facebook.net/en_US/all.js?xfbml=1"; document.getElementById("fb-root").appendChild(e); }()); }; function login() { FB.login(function(response) { if (response.session) { if (response.perms) { // user is logged in and granted some permissions. // perms is a comma separated list of granted permissions } else { // user is logged in, but did not grant any permissions } } else { // user is not logged in } }, {perms:'read_stream,publish_stream,offline_access'}); }; I want to call the "init" function and after "init" should call the "login" function (open up the Facebook Login Window) automatically. But i always get "b is null" FB.provide('',{ui:function(f,b){if(!f....onent(FB.UIServer._resultToken));}}); Error in Firebug. Can anybody help me? Does anybody have the same problem? Thanks

    Read the article

  • Can't get horizontal scroll to work.

    - by kylex
    Here's my code in first-scene.html: <div id="main" class="palm-hasheader"> <div class="palm-header">Header</div> <div id="scrollerId" style="width:500px; height:500px" x-mojo-element="Scroller"> <div> My Text that goes on... and on... and on... horizontally... </div> </div> </div> Here my code in first-assistant.js: function FirstAssistant() { /* this is the creator function for your scene assistant object. */ } FirstAssistant.prototype.setup = function() { /* this function is for setup tasks that have to happen when the scene is created */ this.controller.setupWidget("scrollerId", this.attributes = { mode: 'horizontal' } ); }; FirstAssistant.prototype.activate = function(event) { /* put in event handlers here that should only be in effect when this scene is active. */ }; FirstAssistant.prototype.deactivate = function(event) { /* remove any event handlers you added in activate and do any other cleanup */ }; FirstAssistant.prototype.cleanup = function(event) { /* this function should do any cleanup needed before the scene is destroyed as a result of being popped off the scene stack */ }; Can't get it to scroll horizontally. What am I missing?

    Read the article

  • Loading a view routed by a URL parameter (e.g., /users/:id) in MEAN stack

    - by Matt Rowles
    I am having difficulties with trying to load a user by their id, for some reason my http.get call isn't hitting my controller. I get the following error in the browser console: TypeError: undefined is not a function at new <anonymous> (http://localhost:9000/scripts/controllers/users.js:10:8) Update I've fixed my code up as per comments below, but now my code just enters an infinite loop in the angular users controllers (see code below). I am using the Angular Express Generator for reference Backend - nodejs, express, mongo routes.js: // not sure if this is required, but have used it before? app.param('username', users.show); app.route('/api/users/:username') .get(users.show); controller.js: // This never gets hit exports.show = function (req, res, next, username) { User.findOne({ username: username }) .exec(function (err, user) { req.user = user; res.json(req.user || null); }); }; Frontend - angular app.js: $routeProvider .when('/users/:username', { templateUrl: function( params ){ return 'users/view/' + params.username; }, controller: 'UsersCtrl' }) services/user.js: angular.module('app') .factory('User', function ($resource) { return $resource('/api/users/:username', { username: '@username' }, { update: { method: 'PUT', params: {} }, get: { method: 'GET', params: { username:'username' } } }); }); controllers/users.js: angular.module('app') .controller('UsersCtrl', ['$scope', '$http', '$routeParams', '$route', 'User', function ($scope, $http, $routeParams, $route, User) { // this returns the error above $http.get( '/api/users/' + $routeParams.username ) .success(function( user ) { $scope.user = user; }) .error(function( err) { console.log( err ); }); }]); If it helps, I'm using this setup

    Read the article

  • What's wrong (or right) with this JS Object Pattern?

    - by unsane1
    Here's an example of the pattern I'm using in my javascript objects these days (this example relies on jQuery). http://pastie.org/private/ryn0m1gnjsxdos9onsyxg It works for me reasonably well, but I'm guessing there's something wrong, or at least sub-optimal about it, I'm just curious to get people's opinions. Here's a smaller, inline example of it: sample = function(attach) { // set internal reference to self var self = this; // public variable(s) self.iAmPublic = true; // private variable(s) var debug = false; var host = attach; var pane = { element: false, display: false } // public function(s) self.show = function() { if (!pane.display) { position(); $(pane.element).show('fast'); pane.display = true; } } self.hide = function() { if (pane.display) { $(pane.element).hide('fast'); pane.display = false; } } // private function(s) function init () { // do whatever stuff is needed on instantiation of this object // like perhaps positioning a hidden div pane.element = document.createElement('div'); return self; } function position() { var h = { 'h': $(host).outerHeight(), 'w': $(host).outerWidth(), 'pos': $(host).offset() }; var p = { 'w': $(pane.element).outerWidth() }; $(pane.element).css({ top: h.pos.top + (h.h-1), left: h.pos.left + ((h.w - p.w) / 2) }); } function log () { if (debug) { console.log(arguments); } } // on-instantiation let's set ourselves up return init(); } I'm really curious to get people's thoughts on this.

    Read the article

  • OOP + MVC advice on Member Controller

    - by dan727
    Hi, I am trying to follow good practices as much as possible while I'm learning using OOP in an MVC structure, so i'm turning to you guys for a bit of advice on something which is bothering me a little here. I am writing a site where I will have a number of different forms for members to fill in (mainly data about themselves), so i've decided to set up a Member controller where all of the forms relating to the member are represented as individual methods. This includes login/logout methods, as well as editing profile data etc. In addition to these methods, i also have a method to generate the member's control panel widget, which is a constant on every page on the site while the member is logged in. The only thing is, all of the other methods in this controller all have the same dependencies and form templates, so it would be great to generate all this in the constructor, but as the control_panel method does not have the same dependencies etc, I cannot use the constructor for this purpose, and instead I have to redeclare the dependencies and same template snippets in each method. This obviously isn't ideal and doesn't follow DRY principle, but I'm wondering what I should do with the control_panel method, as it is related to the member and that's why I put it in that controller in the first place. Am I just over-complicating things here and does it make sense to just move the control_panel method into a simple helper class? Here are the basic methods of the controller: class Member_Controller extends Website_Controller { public function __construct() { parent::__construct(); if (request::is_ajax()) { $this->auto_render = FALSE; // disable auto render } } public static function control_panel() { //load control panel view $panel = new View('user/control_panel'); return $panel; } public function login() { } public function register() { } public function profile() { } public function household() { } public function edit_profile() { } public function logout() { } }

    Read the article

  • AngularJS: Using Shared Service(with $resource) to share data between controllers, but how to define callback functions?

    - by shaunlim
    Note: I also posted this question on the AngularJS mailing list here: https://groups.google.com/forum/#!topic/angular/UC8_pZsdn2U Hi All, I'm building my first AngularJS app and am not very familiar with Javascript to begin with so any guidance will be much appreciated :) My App has two controllers, ClientController and CountryController. In CountryController, I'm retrieving a list of countries from a CountryService that uses the $resource object. This works fine, but I want to be able to share the list of countries with the ClientController. After some research, I read that I should use the CountryService to store the data and inject that service into both controllers. This was the code I had before: CountryService: services.factory('CountryService', function($resource) { return $resource('http://localhost:port/restwrapper/client.json', {port: ':8080'}); }); CountryController: //Get list of countries //inherently async query using deferred promise $scope.countries = CountryService.query(function(result){ //preselected first entry as default $scope.selected.country = $scope.countries[0]; }); And after my changes, they look like this: CountryService: services.factory('CountryService', function($resource) { var countryService = {}; var data; var resource = $resource('http://localhost:port/restwrapper/country.json', {port: ':8080'}); var countries = function() { data = resource.query(); return data; } return { getCountries: function() { if(data) { console.log("returning cached data"); return data; } else { console.log("getting countries from server"); return countries(); } } }; }); CountryController: $scope.countries = CountryService.getCountries(function(result){ console.log("i need a callback function here..."); }); The problem is that I used to be able to use the callback function in $resource.query() to preselect a default selection, but now that I've moved the query() call to within my CountryService, I seemed to have lost what. What's the best way to go about solving this problem? Thanks for your help, Shaun

    Read the article

  • Expressjs route param as variable in main app

    - by MoDFoX
    For my app I have two route set up, app.get('/', routes.index); app.get('/:name', routes.index); I would like it to be so that if I don't specify a param, say just go to appurl.com (localhost:3000), it would load a default user, but if I do specify a param(localhost:3000/user), use that as the variable "username" in the following function (placed after my routes). (function getUser(){ var body = '', username = 'WillsonSM', options = { host: 'ws.audioscrobbler.com', port: 80, path: '/2.0/?method=user.gettopartists&user=' + username + '&format=json&limit=20&api_key=APIKEYGOESHERE' }; require('http').request(options, function(res) { res.setEncoding('utf8'); res.on('data', function(chunk) { body += chunk; }); res.on('end', function() { body = JSON.parse(body); artists = body.topartists.artist; }); }).end(); })(); Along with this I have my route set up like so: exports.index = function(req, res){ res.render('index', { title: 'LasTube' }); username = req.params.name; console.log(username); }; unfortunately setting username there to req.params.name does not seem to be accessible from the main app function. My question is: How can I set expressjs/nodejs to use the parameter set via /name when available, and just use a default - in this example "WillsonSM" if not available. I've tried taking "username" out of the main app, and just leaving it in the function, but username becomes undefined, as it is inaccessible from the route, and the app will not run. I can spit out "username" via the routes console.log, so assigning it there is not an issue, but as I am new to expressjs, I am unaware of how I should go about doing this. I have tried all I can think of and find from looking around the internet. Also, if there is a better way of doing this, or I am doing something wrong, please let me know. If I've left out any information, just throw in a comment and I'll try to address it.

    Read the article

  • Sending an AJAX Request - Can't get to work

    - by user357944
    I'm trying to make an AJAX GET request, but I simply cannot get it to work. I want to retrieve the HTML source of example.com. I've previously used JQuery to send AJAX requests, but I use JQuery only for its AJAX capabilities so it's a waste to include the 30KB file for one task. What is it that I'm doing wrong? <script type="text/javascript"> var XMLHttpArray = [ function() {return new XMLHttpRequest()}, function() {return new ActiveXObject("Msxml2.XMLHTTP")}, function() {return new ActiveXObject("Msxml2.XMLHTTP")}, function() {return new ActiveXObject("Microsoft.XMLHTTP")} ]; function createXMLHTTPObject(){ var xmlhttp = false; for(var i=0; i<XMLHttpArray.length; i++){ try{ xmlhttp = XMLHttpArray[i](); }catch(e){ continue; } break; } return xmlhttp; } function AjaxRequest(url,method){ var req = createXMLHTTPObject(); req.onreadystatechange= function(){ if(req.readyState != 4) return; if(req.status != 200) return; return req.responseText; } req.open(method,url,true); req.send(null); } function MakeRequst(){ var result=AjaxRequest("http://example.com","get"); alert(result); } </script>

    Read the article

  • Adding image to html markup

    - by user1491991
    Hello guys i'm having a problem appending a image to my html markup which is generated when a button is clicked... wondering if i could some dirction __--------------------------SCRIPT----------------------------------------------------------- (function($){ $.confirm = function(params){ if($('#confirmOverlay').length){ // A confirm is already shown on the page: return false; } var buttonHTML = ''; $.each(params.buttons,function(name,obj){ // Generating the markup for the buttons: buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>'; if(!obj.action){ obj.action = function(){}; } }); var closetext= 'close'; var markup = [ '<div id="confirmOverlay">', '<div id ="model">','<div id="confirmBox">', '<div id="header">','<div id ="title">',params.title,'</div>', '<div id="close">','<ol id = "olclose">','<li id = "liclose">','<a id="close" href = "#">',closetext,'</a></li>', '<li id = "liclose">','<a id="close" href = "#">','<img src="../modal-close.gif"/>','</a></li>','</ol></div></div>', '<div id ="textbox">','<p>',params.message,'<br>','<br>' ,buttonHTML,'</p>', '</div>', '</div></div></div></div>' ].join(''); $(markup).hide().appendTo('body').fadeIn(); var buttons = $('#confirmBox .button'), i = 0; $.each(params.buttons,function(name,obj){ buttons.eq(i++).click(function(){ // Calling the action attribute when a // click occurs, and hiding the confirm. obj.action(); $.confirm.hide(); return false; }); }); } $.confirm.hide = function(){ $('#confirmOverlay').fadeOut(function(){ $(this).remove(); }); } })(jQuery); i've used firebug to check and its unable to fetch the image here

    Read the article

  • jQuery accessing objects

    - by user1275268
    I'm trying to access the values of an object from a function I created with a callback, but have run into some trouble. I'm still fairly new at jQuery/javascript. I call the function as follows: siteDeps(id,function(data){ $.each(data,function(key,val) { console.log(key); console.log(val); }); }); The function runs 5 ajax queries from XML data and returns data as an multidimensional object; here is a excerpt showing the meat of it: function siteDeps(id,callback) { var result = { sitecontactid : {}, siteaddressid : {}, sitephoneid : {}, contactaddressid : {}, contactphoneid : {} }; ...//.... var url5 = decodeURIComponent("sql2xml.php?query=xxxxxxxxxxx"); $.get(url5, function(data){ $(data).find('ID').each(function(i){ result.delsitephoneid[i] = $(this).text(); }); }); callback(result); } The console.log output shows this: sitecontactid Object 0: "2" 1: "3" __proto__: Object siteaddressid Object 0: "1" __proto__: Object sitephoneid Object 0: "1" 1: "5" 2: "54" __proto__: Object contactaddressid Object 0: "80" __proto__: Object contactphoneid Object 0: "6" __proto__: Object How can I extract the callback data in a format I can use, for instance sitephoneid: "1","5","54" Or is there a better/simpler way to do this? Thanks in advance.

    Read the article

  • 14+ WordPress Portfolio Themes

    - by Edward
    There are various portfolio themes for WordPress out there, with this collection we are trying to help you choose the best one. These themes can be used to create any type of personal, photography, art or corporate portfolio. Display 3 in 1 Display 3 in 1 – Business & Portfolio WordPress Theme. Features a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The Theme has a huge wordpress custom backend (8 additional Admin Pages) that make customization of the Theme easy for those who dont know much about coding or wordpress. Price: $40 View Demo Download DeepFocus Tempting features such as automatic separation of blog and portfolio content by template, publishing of most important information on homepage, styles to choose from and many more such features. It also provides for page templates for blog, portfolio, blog archive, tags etc. It has the best feature that helps you to manage everything from one place. Price: $39 (Package includes more than 55 themes) View Demo Download SimplePress Simple, yet awesome. One of the best portfolio theme. Price: $39 (Package includes more than 55 themes) View Demo Download Graphix Graphix is one of best word press portfolio themes. It is most suited to aspiring designers, developers, artists and photographers who’d like a framework theme, which has a great-looking portfolio with a feature-rich blog. It has theme option page, 5-color style, SEO option, featured content blocks, drop down multi-level menu, social profile link custom widgets, custom post, custom page template etc. Price: $69 Single & $149 Developer Package View Demo Download Bizznizz It boasts of many features such as custom homepage, custom post types, custom widgets, portfolio templates, alternative styles and many more. View Demo Download Showtime Ultimate WordPress Theme for you to create your web portfolio, It has 3 different styles for you to choose from. Price: $40 View Demo Download Montana WP Horizontal Portfolio Theme Montana Theme – WP Horizontal Portfolio Theme, best suited for creative studios to showcase design, photography, illustration, paintings and art. Price: $30 View Demo Download OverALL OverALL Premium WordPress Blog & Portfolio Theme, is low priced & has amazing tons of features. Price: $17 View Demo Download Habitat Habitat – Blog and Portfolio Theme. Unique Portfolio Sorting/Filtering with a custom jQuery script (each entry supports multiple images or a video) Multiple Featured Images for each post to generate individual Slideshows per Post, or the option to directly embed video content from youtube, vimeo, hulu etc. Price: $35 View Demo Download Fresh Folio Fresh Folio from WooThemes, can be used as both portfolio and a premium WordPress theme. The theme is a remix of the Fresh News Theme and Proud Folio Theme which combines all the best elements of the respective blog and portfolio style themes. View Demo Download Fresh Folio Features: Can be used to create an impressive portfolio. 7 diverse theme styles to choose from (default, blue, red, grunge light, grunge floral, antique, blue creamer, nightlife) The template will automatically (visually) separate your blog & portfolio content, making this an amazing theme for aspiring designers, developers, artists, photographers etc. Unique page templates types for the portfolio, blog, blog archives, tags & search results. Integrated Theme Options (for WordPress) to tweak the layout, colour scheme etc. for the theme Optional Automatic Image Resize, which is used to dynamically create the thumbnails and featured images Includes Widget enabled Sidebars. eGallery eGallery is a theme made to transform your wordpress blog into a fully functional online portfolio. Theme is perfectly designed to emphasize the artwork you choose to showcase. The design has been greatly enhanced using javascript, and is easy to implement. Price: $39 (Package includes more than 55 themes) View Demo Download ProudFolio ProudFolio is a portfolio premium WordPress theme from Woo Themes. The theme is for designers, developers, artists and photographers who would like a showcase theme which would depict as a portfolio and also serves a purpose of blog. ProudFolio puts a strong emphasis on the portfolio pieces, allowing for decent-sized thumbnails, huge fullscreen views via Lightbox, and full details on the single page. The theme file also contains a choice of three different background images and color schemes. Price: $70 Single $150 Developer License View Demo Download Features: The template will automatically (visually) separate your blog & portfolio content. An unique homepage layout, which publishes only the most important information; Unique page templates for the portfolio, blog, blog archives, tags & search results. Integrated Theme Options (for WordPress) to tweak the layout, colour scheme etc. for the theme; Built-in video panel, which you can use to publish any web-based Flash videos; Automatic Image Resize, which is used to dynamically create the thumbnails and featured images; Custom Page Templates for Archives, Sitemap & Image Gallery; Built-in Gravatar Support for Authors & Comments; Integrated Banner Management script to display randomized banner ads of your choice site-wide; Pretty drop down navigation everywhere; and Widget Enabled Sidebars. Porftolio WordPress Theme A FREE wordpress theme designed for web portfolios and (for now) just for web portfolios. It is coming with an Administrative Panel from where you can edit the head quote text, you can edit all theme colors, font families, font sizes and you can fill a curriculum vitae and display it into a special page. Theme demo and download can be found here Viz | Biz Viz | Biz is a premium WordPress photo gallery and portfolio theme designed specifically for photographers, graphic designers and web designers who want to display their creative work online, market their services, as well as have a typical text blog, using the power and flexibility of WordPress. It is priced for $79.95. Theme Features: Premium quality portfolio template Custom logo uploader to replace the standard graphic with your own unique look from the WP Dashboard Integrated blog component (front images are custom fields and thumbnails, but you can also have a typical blog) Four tabbed feature areas (About Me, Services, Recent Posts, and Tags) Two home page feature photos (You choose which photos to feature using a WP category) Manage your online portfolio through the WordPress CMS Crop two sizes of your work: One for the front page thumbnails and another full size version and upload to WP Search engine optimized. Related posts:14 WordPress Photo Blog & Portfolio Themes 6 PhotoBlog Portfolio WordPress Themes Professional WordPress Business Themes

    Read the article

  • Configuration "diff" across Oracle WebCenter Sites instances

    - by Mark Fincham-Oracle
    Problem Statement With many Oracle WebCenter Sites environments - how do you know if the various configuration assets and settings are in sync across all of those environments? Background At Oracle we typically have a "W" shaped set of environments.  For the "Production" environments we typically have a disaster recovery clone as well and sometimes additional QA environments alongside the production management environment. In the case of www.java.com we have 10 different environments. All configuration assets/settings (CSElements, Templates, Start Menus etc..) start life on the Development Management environment and are then published downstream to other environments as part of the software development lifecycle. Ensuring that each of these 10 environments has the same set of Templates, CSElements, StartMenus, TreeTabs etc.. is impossible to do efficiently without automation. Solution Summary  The solution comprises of two components. A JSON data feed from each environment. A simple HTML page that consumes these JSON data feeds.  Data Feed: Create a JSON WebService on each environment. The WebService is no more than a SiteEntry + CSElement. The CSElement queries various DB tables to obtain details of the assets/settings returning this data in a JSON feed. Report: Create a simple HTML page that uses JQuery to fetch the JSON feed from each environment and display the results in a table. Since all assets (CSElements, Templates etc..) are published between environments they will have the same last modified date. If the last modified date of an asset is different in the JSON feed or is mising from an environment entirely then highlight that in the report table. Example Solution Details Step 1: Create a Site Entry + CSElement that outputs JSON Site Entry & CSElement Setup  The SiteEntry should be uncached so that the most recent configuration information is returned at all times. In the CSElement set the contenttype accordingly: Step 2: Write the CSElement Logic The basic logic, that we repeat for each asset or setting that we are interested in, is to query the DB using <ics:sql> and then loop over the resultset with <ics:listloop>. For example: <ics:sql sql="SELECT name,updateddate FROM Template WHERE status != 'VO'" listname="TemplateList" table="Template" /> "templates": [ <ics:listloop listname="TemplateList"> {"name":"<ics:listget listname="TemplateList"  fieldname="name"/>", "modified":"<ics:listget listname="TemplateList"  fieldname="updateddate"/>"}, </ics:listloop> ], A comprehensive list of SQL queries to fetch each configuration asset/settings can be seen in the appendix at the end of this article. For the generation of the JSON data structure you could use Jettison (the library ships with the 11.1.1.8 version of the product), native Java 7 capabilities or (as the above example demonstrates) you could roll-your-own JSON output but that is not advised. Step 3: Create an HTML Report The JavaScript logic looks something like this.. 1) Create a list of JSON feeds to fetch: ENVS['dev-mgmngt'] = 'http://dev-mngmnt.example.com/sites/ContentServer?d=&pagename=settings.json'; ENVS['dev-dlvry'] = 'http://dev-dlvry.example.com/sites/ContentServer?d=&pagename=settings.json';  ENVS['test-mngmnt'] = 'http://test-mngmnt.example.com/sites/ContentServer?d=&pagename=settings.json';  ENVS['test-dlvry'] = 'http://test-dlvry.example.com/sites/ContentServer?d=&pagename=settings.json';   2) Create a function to get the JSON feeds: function getDataForEnvironment(url){ return $.ajax({ type: 'GET', url: url, dataType: 'jsonp', beforeSend: function (jqXHR, settings){ jqXHR.originalEnv = env; jqXHR.originalUrl = url; }, success: function(json, status, jqXHR) { console.log('....success fetching: ' + jqXHR.originalUrl); // store the returned data in ALLDATA ALLDATA[jqXHR.originalEnv] = json; }, error: function(jqXHR, status, e) { console.log('....ERROR: Failed to get data from [' + url + '] ' + status + ' ' + e); } }); } 3) Fetch each JSON feed: for (var env in ENVS) { console.log('Fetching data for env [' + env +'].'); var promisedData = getDataForEnvironment(ENVS[env]); promisedData.success(function (data) {}); }  4) For each configuration asset or setting create a table in the report For example, CSElements: 1) Get a list of unique CSElement names from all of the returned JSON data. 2) For each unique CSElement name, create a row in the table  3) Select 1 environment to represent the master or ideal state (e.g. "Everything should be like Production Delivery") 4) For each environment, compare the last modified date of this envs CSElement to the master. Highlight any differences in last modified date or missing CSElements. 5) Repeat...    Appendix This section contains various SQL statements that can be used to retrieve configuration settings from the DB.  Templates  <ics:sql sql="SELECT name,updateddate FROM Template WHERE status != 'VO'" listname="TemplateList" table="Template" /> CSElements <ics:sql sql="SELECT name,updateddate FROM CSElement WHERE status != 'VO'" listname="CSEList" table="CSElement" /> Start Menus <ics:sql sql="select sm.id, sm.cs_name, sm.cs_description, sm.cs_assettype, sm.cs_assetsubtype, sm.cs_itemtype, smr.cs_rolename, p.name from StartMenu sm, StartMenu_Sites sms, StartMenu_Roles smr, Publication p where sm.id=sms.ownerid and sm.id=smr.cs_ownerid and sms.pubid=p.id order by sm.id" listname="startList" table="Publication,StartMenu,StartMenu_Roles,StartMenu_Sites"/>  Publishing Configurations <ics:sql sql="select id, name, description, type, dest, factors from PubTarget" listname="pubTargetList" table="PubTarget" /> Tree Tabs <ics:sql sql="select tt.id, tt.title, tt.tooltip, p.name as pubname, ttr.cs_rolename, ttsect.name as sectname from TreeTabs tt, TreeTabs_Roles ttr, TreeTabs_Sect ttsect,TreeTabs_Sites ttsites LEFT JOIN Publication p  on p.id=ttsites.pubid where p.id is not null and tt.id=ttsites.ownerid and ttsites.pubid=p.id and tt.id=ttr.cs_ownerid and tt.id=ttsect.ownerid order by tt.id" listname="treeTabList" table="TreeTabs,TreeTabs_Roles,TreeTabs_Sect,TreeTabs_Sites,Publication" />  Filters <ics:sql sql="select name,description,classname from Filters" listname="filtersList" table="Filters" /> Attribute Types <ics:sql sql="select id,valuetype,name,updateddate from AttrTypes where status != 'VO'" listname="AttrList" table="AttrTypes" /> WebReference Patterns <ics:sql sql="select id,webroot,pattern,assettype,name,params,publication from WebReferencesPatterns" listname="WebRefList" table="WebReferencesPatterns" /> Device Groups <ics:sql sql="select id,devicegroupsuffix,updateddate,name from DeviceGroup" listname="DeviceList" table="DeviceGroup" /> Site Entries <ics:sql sql="select se.id,se.name,se.pagename,se.cselement_id,se.updateddate,cse.rootelement from SiteEntry se LEFT JOIN CSElement cse on cse.id = se.cselement_id where se.status != 'VO'" listname="SiteList" table="SiteEntry,CSElement" /> Webroots <ics:sql sql="select id,name,rooturl,updatedby,updateddate from WebRoot" listname="webrootList" table="WebRoot" /> Page Definitions <ics:sql sql="select pd.id, pd.name, pd.updatedby, pd.updateddate, pd.description, pdt.attributeid, pa.name as nameattr, pdt.requiredflag, pdt.ordinal from PageDefinition pd, PageDefinition_TAttr pdt, PageAttribute pa where pd.status != 'VO' and pa.id=pdt.attributeid and pdt.ownerid=pd.id order by pd.id,pdt.ordinal" listname="pageDefList" table="PageDefinition,PageAttribute,PageDefinition_TAttr" /> FW_Application <ics:sql sql="select id,name,updateddate from FW_Application where status != 'VO'" listname="FWList" table="FW_Application" /> Custom Elements <ics:sql sql="select elementname from ElementCatalog where elementname like 'CustomElements%'" listname="elementList" table="ElementCatalog" />

    Read the article

  • Deterministic/Consistent Unique Masking

    - by Dinesh Rajasekharan-Oracle
    One of the key requirements while masking data in large databases or multi database environment is to consistently mask some columns, i.e. for a given input the output should always be the same. At the same time the masked output should not be predictable. Deterministic masking also eliminates the need to spend enormous amount of time spent in identifying data relationships, i.e. parent and child relationships among columns defined in the application tables. In this blog post I will explain different ways of consistently masking the data across databases using Oracle Data Masking and Subsetting The readers of post should have minimal knowledge on Oracle Enterprise Manager 12c, Application Data Modeling, Data Masking concepts. For more information on these concepts, please refer to Oracle Data Masking and Subsetting document Oracle Data Masking and Subsetting 12c provides four methods using which users can consistently yet irreversibly mask their inputs. 1. Substitute 2. SQL Expression 3. Encrypt 4. User Defined Function SUBSTITUTE The substitute masking format replaces the original value with a value from a pre-created database table. As the method uses a hash based algorithm in the back end the mappings are consistent. For example consider DEPARTMENT_ID in EMPLOYEES table is replaced with FAKE_DEPARTMENT_ID from FAKE_TABLE. The substitute masking transformation that all occurrences of DEPARTMENT_ID say ‘101’ will be replaced with ‘502’ provided same substitution table and column is used , i.e. FAKE_TABLE.FAKE_DEPARTMENT_ID. The following screen shot shows the usage of the Substitute masking format with in a masking definition: Note that the uniqueness of the masked value depends on the number of columns being used in the substitution table i.e. if the original table contains 50000 unique values, then for the masked output to be unique and deterministic the substitution column should also contain 50000 unique values without which only consistency is maintained but not uniqueness. SQL EXPRESSION SQL Expression replaces an existing value with the output of a specified SQL Expression. For example while masking an EMPLOYEES table the EMAIL_ID of an employee has to be in the format EMPLOYEE’s [email protected] while FIRST_NAME and LAST_NAME are the actual column names of the EMPLOYEES table then the corresponding SQL Expression will look like %FIRST_NAME%||’.’||%LAST_NAME%||’@COMPANY.COM’. The advantage of this technique is that if you are masking FIRST_NAME and LAST_NAME of the EMPLOYEES table than the corresponding EMAIL ID will be replaced accordingly by the masking scripts. One of the interesting aspect’s of a SQL Expressions is that you can use sub SQL expressions, which means that you can write a nested SQL and use it as SQL Expression to address a complex masking business use cases. SQL Expression can also be used to consistently replace value with hashed value using Oracle’s PL/SQL function ORA_HASH. The following SQL Expression will help in the previous example for replacing the DEPARTMENT_IDs with a hashed number ORA_HASH (%DEPARTMENT_ID%, 1000) The following screen shot shows the usage of encrypt masking format with in the masking definition: ORA_HASH takes three arguments: 1. Expression which can be of any data type except LONG, LOB, User Defined Type [nested table type is allowed]. In the above example I used the Original value as expression. 2. Number of hash buckets which can be number between 0 and 4294967295. The default value is 4294967295. You can also co-relate the number of hash buckets to a range of numbers. In the above example above the bucket value is specified as 1000, so the end result will be a hashed number in between 0 and 1000. 3. Seed, can be any number which decides the consistency, i.e. for a given seed value the output will always be same. The default seed is 0. In the above SQL Expression a seed in not specified, so it to 0. If you have to use a non default seed then the function will look like. ORA_HASH (%DEPARTMENT_ID%, 1000, 1234 The uniqueness depends on the input and the number of hash buckets used. However as ORA_HASH uses a 32 bit algorithm, considering birthday paradox or pigeonhole principle there is a 0.5 probability of collision after 232-1 unique values. ENCRYPT Encrypt masking format uses a blend of 3DES encryption algorithm, hashing, and regular expression to produce a deterministic and unique masked output. The format of the masked output corresponds to the specified regular expression. As this technique uses a key [string] to encrypt the data, the same string can be used to decrypt the data. The key also acts as seed to maintain consistent outputs for a given input. The following screen shot shows the usage of encrypt masking format with in the masking definition: Regular Expressions may look complex for the first time users but you will soon realize that it’s a simple language. There are many resources in internet, oracle documentation, oracle learning library, my oracle support on writing a Regular Expressions, out of all the following My Oracle Support document helped me to get started with Regular Expressions: Oracle SQL Support for Regular Expressions[Video](Doc ID 1369668.1) USER DEFINED FUNCTION [UDF] User Defined Function or UDF provides flexibility for the users to code their own masking logic in PL/SQL, which can be called from masking Defintion. The standard format of an UDF in Oracle Data Masking and Subsetting is: Function udf_func (rowid varchar2, column_name varchar2, original_value varchar2) returns varchar2; Where • rowid is the row identifier of the column that needs to be masked • column_name is the name of the column that needs to be masked • original_value is the column value that needs to be masked You can achieve deterministic masking by using Oracle’s built in hash functions like, ORA_HASH, DBMS_CRYPTO.MD4, DBMS_CRYPTO.MD5, DBMS_UTILITY. GET_HASH_VALUE.Please refers to the Oracle Database Documentation for more information on the Oracle Hash functions. For example the following masking UDF generate deterministic unique hexadecimal values for a given string input: CREATE OR REPLACE FUNCTION RD_DUX (rid varchar2, column_name varchar2, orig_val VARCHAR2) RETURN VARCHAR2 DETERMINISTIC PARALLEL_ENABLE IS stext varchar2 (26); no_of_characters number(2); BEGIN no_of_characters:=6; stext:=substr(RAWTOHEX(DBMS_CRYPTO.HASH(UTL_RAW.CAST_TO_RAW(text),1)),0,no_of_characters); RETURN stext; END; The uniqueness depends on the input and length of the string and number of bits used by hash algorithm. In the above function MD4 hash is used [denoted by argument 1 in the DBMS_CRYPTO.HASH function which is a 128 bit algorithm which produces 2^128-1 unique hashed values , however this is limited by the length of the input string which is 6, so only 6^6 unique values will be generated. Also do not forget about the birthday paradox/pigeonhole principle mentioned earlier in this post. An another example is to consistently replace characters or numbers preserving the length and special characters as shown below: CREATE OR REPLACE FUNCTION RD_DUS(rid varchar2,column_name varchar2,orig_val VARCHAR2) RETURN VARCHAR2 DETERMINISTIC PARALLEL_ENABLE IS stext varchar2(26); BEGIN DBMS_RANDOM.SEED(orig_val); stext:=TRANSLATE(orig_val,'ABCDEFGHILKLMNOPQRSTUVWXYZ',DBMS_RANDOM.STRING('U',26)); stext:=TRANSLATE(stext,'abcdefghijklmnopqrstuvwxyz',DBMS_RANDOM.STRING('L',26)); stext:=TRANSLATE(stext,'0123456789',to_char(DBMS_RANDOM.VALUE(1,9))); stext:=REPLACE(stext,'.','0'); RETURN stext; END; The following screen shot shows the usage of an UDF with in a masking definition: To summarize, Oracle Data Masking and Subsetting helps you to consistently mask data across databases using one or all of the methods described in this post. It saves the hassle of identifying the parent-child relationships defined in the application table. Happy Masking

    Read the article

  • Building an Infrastructure Cloud with Oracle VM for x86 + Enterprise Manager 12c

    - by Richard Rotter
    Cloud Computing? Everyone is talking about Cloud these days. Everyone is explaining how the cloud will help you to bring your service up and running very fast, secure and with little effort. You can find these kinds of presentations at almost every event around the globe. But what is really behind all this stuff? Is it really so simple? And the answer is: Yes it is! With the Oracle SW Stack it is! In this post, I will try to bring this down to earth, demonstrating how easy it could be to build a cloud infrastructure with Oracle's solution for cloud computing.But let me cover some basics first: How fast can you build a cloud?How elastic is your cloud so you can provide new services on demand? How much effort does it take to monitor and operate your Cloud Infrastructure in order to meet your SLAs?How easy is it to chargeback for your services provided? These are the critical success factors of Cloud Computing. And Oracle has an answer to all those questions. By using Oracle VM for X86 in combination with Enterprise Manager 12c you can build and control your cloud environment very fast and easy. What are the fundamental building blocks for your cloud? Oracle Cloud Building Blocks #1 Hardware Surprise, surprise. Even the cloud needs to run somewhere, hence you will need hardware. This HW normally consists of servers, storage and networking. But Oracles goes beyond that. There are Optimized Solutions available for your cloud infrastructure. This is a cookbook to build your HW cloud platform. For example, building your cloud infrastructure with blades and our network infrastructure will reduce complexity in your datacenter (Blades with switch network modules, splitter cables to reduce the amount of cables, TOR (Top Of the Rack) switches which are building the interface to your infrastructure environment. Reducing complexity even in the cabling will help you to manage your environment more efficient and with less risk. Of course, our engineered systems fit into the cloud perfectly too. Although they are considered as a PaaS themselves, having the database SW (for Exadata) and the application development environment (for Exalogic) already deployed on them, in general they are ideal systems to enable you building your own cloud and PaaS infrastructure. #2 Virtualization The next missing link in the cloud setup is virtualization. For me personally, it's one of the most hidden "secret", that oracle can provide you with a complete virtualization stack in terms of a hypervisor on both architectures: X86 and Sparc CPUs. There is Oracle VM for X86 and Oracle VM for Sparc available at no additional  license costs if your are running this virtualization stack on top of Oracle HW (and with Oracle Premier Support for HW). This completes the virtualization portfolio together with Solaris Zones introduced already with Solaris 10 a few years ago. Let me explain how Oracle VM for X86 works: Oracle VM for x86 consists of two main parts: - The Oracle VM Server: Oracle VM Server is installed on bare metal and it is the hypervisor which is able to run virtual machines. It has a very small footprint. The ISO-Image of Oracle VM Server is only 200MB large. It is very small but efficient. You can install a OVM-Server in less than 5 mins by booting the Server with the ISO-Image assigned and providing the necessary configuration parameters (like installing an Linux distribution). After the installation, the OVM-Server is ready to use. That's all. - The Oracle VM-Manager: OVM-Manager is the central management tool where you can control your OVM-Servers. OVM-Manager provides the graphical user interface, which is an Application Development Framework (ADF) application, with a familiar web-browser based interface, to manage Oracle VM Servers, virtual machines, and resources. The Oracle VM Manager has the following capabilities: Create virtual machines Create server pools Power on and off virtual machines Manage networks and storage Import virtual machines, ISO files, and templates Manage high availability of Oracle VM Servers, server pools, and virtual machines Perform live migration of virtual machines I want to highlight one of the goodies which you can use if you are running Oracle VM for X86: Preconfigured, downloadable Virtual Machine Templates form edelivery With these templates, you can download completely preconfigured Virtual Machines in your environment, boot them up, configure them at first time boot and use it. There are templates for almost all Oracle SW and Applications (like Fusion Middleware, Database, Siebel, etc.) available. #3) Cloud Management The management of your cloud infrastructure is key. This is a day-to-day job. Acquiring HW, installing a virtualization layer on top of it is done just at the beginning and if you want to expand your infrastructure. But managing your cloud, keeping it up and running, deploying new services, changing your chargeback model, etc, these are the daily jobs. These jobs must be simple, secure and easy to manage. The Enterprise Manager 12c Cloud provides this functionality from one management cockpit. Enterprise Manager 12c uses Oracle VM Manager to control OVM Serverpools. Once you registered your OVM-Managers in Enterprise Manager, then you are able to setup your cloud infrastructure and manage everything from Enterprise Manager. What you need to do in EM12c is: ">Register your OVM Manager in Enterprise ManagerAfter Registering your OVM Manager, all the functionality of Oracle VM for X86 is also available in Enterprise Manager. Enterprise Manager works as a "Manger" of the Manager. You can register as many OVM-Managers you want and control your complete virtualization environment Create Roles and Users for your Self Service Portal in Enterprise ManagerWith this step you allow users to logon on the Enterprise Manager Self Service Portal. Users can request Virtual Machines in this portal. Setup the Cloud InfrastructureSetup the Quotas for your self service users. How many VMs can they request? How much of your resources ( cpu, memory, storage, network, etc. etc.)? Which SW components (templates, assemblys) can your self service users request? In this step, you basically set up the complete cloud infrastructure. Setup ChargebackOnce your cloud is set up, you need to configure your chargeback mechanism. The Enterprise Manager collects the resources metrics, which are used in a very deep level. Almost all collected Metrics could be used in the chargeback module. You can define chargeback plans based on configurations (charge for the amount of cpu, memory, storage is assigned to a machine, or for a specific OS which is installed) or chargeback on resource consumption (% of cpu used, storage used, etc). Or you can also define a combination of configuration and consumption chargeback plans. The chargeback module is very flexible. Here is a overview of the workflow how to handle infrastructure cloud in EM: Summary As you can see, setting up an Infrastructure Cloud Service with Oracle VM for X86 and Enterprise Manager 12c is really simple. I personally configured a complete cloud environment with three X86 servers and a small JBOD san box in less than 3 hours. There is no magic in it, it is all straightforward. Of course, you have to have some experience with Oracle VM and Enterprise Manager. Experience in setting up Linux environments helps as well. I plan to publish a technical cookbook in the next few weeks. I hope you found this post useful and will see you again here on our blog. Any hints, comments are welcome!

    Read the article

  • How to Control Screen Layouts in LightSwitch

    - by ChrisD
    Visual Studio LightSwitch has a bunch of screen templates that you can use to quickly generate screens. They give you good starting points that you can customize further. When you add a new screen to your project you see a set of screen templates that you can choose from. These templates lay out all the related data you choose to put on a screen automatically for you. And don’t under estimate them; they do a great job of laying out controls in a smart way. For instance, a tab control will be used when you select more than one related set of data to display on a screen. However, you’re not limited to taking the layout as is. In fact, the screen designer is pretty flexible and allows you to create stacks of controls in a variety of configurations. You just need to visualize your screen as a series of containers that you can lay out in rows and columns. You then place controls or stacks of controls into these areas to align the screen exactly how you want. If you’re new in Visual Studio LightSwitch, you can see this tutorial. OK, Let’s start with a simple example. I have already designed my data entities for a simple order tracking system similar to the Northwind database. I also have added a Search Data  Screen to search my Products already. Now I will add a new Details Screen for my Products and make it the default screen via the “Add New Screen” dialog: The screen designer picks a simple layout for me based on the single entity I chose, in this case Product. Hit F5 to run the application, select a Product on the search screen to open the Product Details Screen. Notice that it’s pretty simple because my entity is simple. Click the “Customize” button in the top right of the screen so we can start tweaking it. The left side of the screen shows the containership of controls and data bindings (called the content tree) and the right side shows the live preview with data. Notice that we have a simple layout of two rows but only one row is populated (with a vertical stack of controls in this case). The bottom row is empty. You can envision the screen like this: Each container will display a group of data that you select. For instance in the above screen, the top row is set to a vertical stack control and the group of data to display is coming from Product. So when laying out screens you need to think in terms of containers of controls bound to groups of data. To change the data to which a container is bound, select the data item next to the container: You can select the “New Group” item in order to create more containers (or controls) within the current container. For instance to totally control the layout, select the Product in the top row and hit the delete key. This will delete the vertical stack and therefore all the controls on the screen. The content tree will still have two rows, but the rows are now both empty. If you want a layout of four containers (two rows and two columns) then select “New Group” for the data item and then change the vertical stack control to “Two Columns” for both of the rows as shown here: You can keep going on and on by selecting new groups and choosing between rows or columns. Here’s a layout with 8 containers, 4 rows and 2 columns: And here is a layout with 7 content areas; one row across the top of the screen and three rows with two columns below that: When you select Choose Content and select a data item like Product it will populate all the controls within the container (row or column in a vertical stack) however you have complete control on what to display within each group. You can delete fields you don’t want to display and/or change their controls. You can also change the size of controls and how they display by changing the settings in the properties window. If you are in the Screen Designer (and not the customization mode like we are here) you can also drag-drop data items from the left-hand side of the screen to the content tree. Note, however, that not all areas of the tree will allow you to drop a data item if there is a binding already set to a different set of data. For instance you can’t drop a Customer ID into the same group as a Product if they originate from different entities. To get around this, all you need to do is create a new group and content area as shown above. Let’s take a more complex example that deals with more than just product. I want to design a complex screen that displays Products and their Category, as well as all the OrderDetails for which that product is selected. This time I will create a new screen and select List and Details, select the Products screen data, and include the related OrderDetails. However I’m going to totally change the layout so that a Product grid is at the top left and below that is the selected Product detail. Below that will be the Category text fields and image in two columns below. On the right side I want the OrderDetails grid to take up the whole right side of the screen. All this can be done in customization mode while you’re debugging the application. To do this, I first deleted all the content items in the tree and then re-created the content tree as shown in the image below. I also set the image to be larger and the description textbox to be 5 rows using the property window below the live preview. I added the green lines to indicate the containers and show how it maps to the content tree (click to enlarge): I hope this demystifies the screen designer a little bit. Remember that screen templates are excellent starting points – you can take them as-is or customize them further. It takes a little fooling around with customizing screens to get them to do exactly what you want but there are a ton of possibilities once you get the hang of it. Stay tuned for more information on how to create your own screen templates that show up in the “Add New Screen” dialog. Enjoy! The tutorial that might be interested: Adding Custom Control In LightSwitch

    Read the article

  • How to check if the tab page is dirty and prompt the user to save before navigating away using ajaxtoolkit tab control in ASP.NET

    Step 1: Put a hidden variable in Update panel <asp:HiddenField ID="hfIsDirty" runat="server" Value="0" /> Step 2: Put the following code in ajaxcontrol tool kit tabcontainer OnClientActiveTabChanged="ActiveTabChanged" Copy the following script in the aspx page. <script type="text/javascript">       //Trigger Server side post back for the Tab container       function ActiveTabChanged(sender, e) {           __doPostBack('<%= tcBaseline.ClientID %>', '');       }       //Sets the dirty flag if the page is dirty       function setDirty() {           var hf = document.getElementById("<%=hfIsDirty.ClientID%>");           if (hf != null)               hf.value = 1;       }       //Resets the dirty flag after save       function clearDirty() {           var hf = document.getElementById("<%=hfIsDirty.ClientID%>");           hf.value = 0;       }       function showMessage() { return "page is dirty" }       function setControlChange() {           if (typeof (event.srcElement) != 'undefined')           { event.srcElement.onchange = setDirty; }       }       function checkDirty() {           var tc = document.getElementById("<%=tcBaseline.ClientID%>");           var hf = document.getElementById("<%=hfIsDirty.ClientID%>");           if (hf.value == "1") {               var conf = confirm("Do you want o loose unsaved changes? Please Cancel to stay on page or OK to continue ");               if (conf) {                   clearDirty();                   return true;               }               else {                   var e = window.event;                   e.cancelBubble = true;                   if (e.stopPropagation) e.stopPropagation();                   return false;               }           }           else               return true;       }       document.body.onclick = setControlChange;       document.body.onkeyup = setControlChange;       var onBeforeUnloadFired = false;       // Function to reset the above flag.       function resetOnBeforeUnloadFired() {           onBeforeUnloadFired = false;       }       function doBeforeUnload() {           var hf = document.getElementById("<%=hfIsDirty.ClientID%>");           // If this function has not been run before...           if (!onBeforeUnloadFired) {               // Prevent this function from being run twice in succession.               onBeforeUnloadFired = true;               // If the form is dirty...               if (hf.value == "1") {                   event.returnValue = "If you continue you will lose any changes that you have made to this record.";               }           }           window.setTimeout("resetOnBeforeUnloadFired()", 1000);       }       if (window.body) {           window.body.onbeforeunload = doBeforeUnload;       }       else           window.onbeforeunload = doBeforeUnload;   </script> Step 3: Here is how the tabcontrol should look like <asp:UpdatePanel ID="upTab" runat="server" UpdateMode="conditional">                     <ContentTemplate>                         <ajaxtoolkit:TabContainer ID="tcBaseline" runat="server" Height="400px" OnClientActiveTabChanged="ActiveTabChanged">                             <ajaxtoolkit:TabPanel ID="tpPersonalInformation" runat="server">                                 <HeaderTemplate>                                     <asp:Label ID="lblPITab" runat="server" Text="<%$ Resources:Resources, Baseline_Tab_PersonalInformation %>"                                         onclick="checkDirty();"></asp:Label>                                 </HeaderTemplate>                                 <ContentTemplate>                                     <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> </ContentTemplate>                             </ajaxtoolkit:TabPanel> span.fullpost {display:none;}

    Read the article

  • php script gets two ajax requests, only returns one?

    - by Dan.StackOverflow
    I'll start from the beginning. I'm building a wordpress plugin that does double duty, in that it can be inserted in to a post via a shortcode, or added as a sidebar widget. All it does is output some js to make jquery.post requests to a local php file. The local php file makes a request to a webservice for some data. (I had to do it this way instead of directly querying the web service with jquery.ajax because the url contains a license key that would be public if put in the js). Anyway, When I am viewing a page in the wordpress blog that has both the sidebar widget and the plugin output via shortcode only one of the requests work. I mean it works in that it gets a response back from the php script. Once the page is loaded they both work normally when manually told to. Webpage view - send 2 post requests to my php script - both elements should be filed in, but only one is. My php script is just: <?php if(isset($_POST["zip"])) { // build a curl object, execute the request, // and basically just echo what the curl request returns. } ?> Pretty basic. here is some js some people wanted to see: function widget_getActivities( zip ){ jQuery("#widget_active_list").text(""); jQuery.post("http://localhost/wordpress/wp-content/ActiveAjax.php", { zip: zip}, function(text) { jQuery(text).find("asset").each(function(j, aval){ var html = ""; html += "<a href='" + jQuery(aval).find("trackback").text() + "' target='new'> " + jQuery(aval).find("assetName").text() + "</a><b> at </b>"; jQuery("location", aval).each(function(i, val){ html += jQuery("locationName", val).text() + " <b> on </b>"; }); jQuery("date", aval).each(function(){ html += jQuery("startDate", aval).text(); <!--jQuery("#widget_active_list").append("<div id='ActivityEntry'>" + html + " </div>");--> jQuery("#widget_active_list") .append(jQuery("<div>") .addClass("widget_ActivityEntry") .html(html) .bind("mouseenter", function(){ jQuery(this).animate({ fontSize: "20px", lineHeight: "1.2em" }, 50); }) .bind("mouseleave", function(){ jQuery(this).animate({ fontSize: "10px", lineHeight: "1.2em" }, 50); }) ); }); }); }); } Now imagine there is another function identical to this one except everything that is prepended with 'widget_' isn't prepended. These two functions get called separately via: jQuery(document).ready(function(){ w_zip = jQuery("#widget_zip").val(); widget_getActivities( w_zip ); jQuery("#widget_updateZipLink").click(function() { //start function when any update link is clicked widget_c_zip = jQuery("#widget_zip").val(); if (undefined == widget_c_zip || widget_c_zip == "" || widget_c_zip.length != 5) jQuery("#widget_zipError").text("Bad zip code"); else widget_getActivities( widget_c_zip ); }); }) I can see in my apache logs that both requests are being made. I'm guessing it is some sort of race condition but that doesn't make ANY sense. I'm new to all this, any ideas? EDIT: I've come up with a sub-optimal solution. I have my widget detect if the plugin is also being used on the page, and if so it waits for 3 seconds before performing the request. But I have a feeling this same thing is going to happen if multiple clients perform a page request at the same time that triggers one of the requests to my php script, because I believe the problem is in the php script, which is scary.

    Read the article

  • ngGrid reusable filter AngularJS

    - by wootscootinboogie
    I have a business requirement that I filter a boolean value in my ngGrid. The filter has three states: only true, only false and both. Filtering like this seems to be a common enough use case that I should refactor that functionality out of my code for re use (possibly in a directive/filter?). I'd like to know how I can go about pulling out the customFilter function in my controller and make it so that I can pass the filter a property name on which to filter, and a value for selectedFilterOption. The code currently works, but I feel like this is a good chance to get better at angular :). So how can I pull out my filtering used here and make it a reusable piece of functionality? app.controller('DocumentController',function($scope,DocumentService) { $scope.filterOptions = { filterText: '', useExternalFilter: false }; $scope.totalServerItems =0; $scope.pagingOptions ={ pageSizes: [5,10,100], pageSize: 5, currentPage: 1 } //filter! $scope.dropdownOptions = [{ name: 'Show all' },{ name: 'Show active' },{ name: 'Show trash' }]; //default choice for filtering is 'show active' $scope.selectedFilterOption = $scope.dropdownOptions[1]; //three stage bool filter $scope.customFilter = function(data){ var tempData = []; angular.forEach(data,function(item){ if($scope.selectedFilterOption.name === 'Show all'){ tempData.push(item); } else if($scope.selectedFilterOption.name ==='Show active' && !item.markedForDelete){ tempData.push(item); } else if($scope.selectedFilterOption.name ==='Show trash' && item.markedForDelete){ tempData.push(item); } }); return tempData; } //grabbing data $scope.getPagedDataAsync = function(pageSize, page, filterValue, searchText){ var data; if(searchText){ var ft = searchText.toLowerCase(); DocumentService.get('filterableData.json').success(function(largeLoad){ //filter the data when searching data = $scope.customFilter(largeLoad).filter(function(item){ return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; }) $scope.setPagingData($scope.customFilter(data),page,pageSize); }) } else{ DocumentService.get('filterableData.json').success(function(largeLoad){ var testLargeLoad = $scope.customFilter(largeLoad); //filter the data on initial page load when no search text has been entered $scope.setPagingData(testLargeLoad,page,pageSize); }) } }; //paging $scope.setPagingData = function(data, page, pageSize){ var pagedData = data.slice((page -1) * pageSize, page * pageSize); //filter the data for paging $scope.myData = $scope.customFilter(pagedData); $scope.myData = pagedData; $scope.totalServerItems = data.length; if(!$scope.$$phase){ $scope.$apply(); } } //watch for filter option change, set the data property of gridOptions to the newly filtered data $scope.$watch('selectedFilterOption',function(){ var data = $scope.customFilter($scope.myData); $scope.myData = data; $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); $scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize); }) $scope.$watch('pagingOptions',function(newVal, oldVal){ if(newVal !== oldVal && newVal.currentPage !== oldVal.currentPage){ $scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText); } },true) $scope.message ="This is a message"; $scope.gridOptions = { data: 'myData', enablePaging: true, showFooter:true, totalServerItems: 'totalServerItems', pagingOptions: $scope.pagingOptions, filterOptions: $scope.filterOptions, showFilter: true, enableCellEdit: true, showColumnMenu: true, enableColumnReordering: true, enablePinning: true, showGroupPanel: true, groupsCollapsedByDefault: true, enableColumnResize: true } //get the data on page load $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); }); HTML

    Read the article

< Previous Page | 289 290 291 292 293 294 295 296 297 298 299 300  | Next Page >