w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How can I create a "sliding pages" effect in KnockoutJS?
This can be done with a binding, but first we need a helper function for our buttons. It returns a click handler that sets an observable to a specific value. It can be used like data-bind="click: page.set(1). ko.observable.fn.set = function(value) { var obs = this; return function(){ obs(value); } } Now our HTML will have a binding in the page container (.pages) telling us what page to be on. Each page has a simple class which we use in to describe them. <div class="pages" data-bind="page: page"> <div class="page text-center"> <h1>Page 1</h1> <button class="btn" data-bind="click: page.set(1)">Go to Page 2</button> </div> </div> Our CSS is a little strange. We need to make .pages much larger than the body, and hide th

Categories : Javascript

adding sliding effect or animation in page swiping, Ipad
Looking at its source code, I'd guess that you would have to modify the library in order to do what you intend. The page change code is in the function irPagina(); it seems to be adding a 500ms transition effect; you should take a look to see why that's not working on the iPad.

Categories : Jquery

How can I create a real "reveal page" slide effect
This is the way that I found to do this... no one seemed interested in the question but I hope you like the answer: <html> <head> <style> html, body { min-height: 100%; margin: 0; padding: 0; } #container { height: 100%; width: 100%; overflow-y: scroll; position: fixed; } .items { width: 100%; height: 102%; background-attachment: fixed; background-position: 50%; background-repeat: no-repeat; position: relative; } #box1 { background-image: url(yourimage1.png); background-color: #03F; } #box2 { background-image: url(yourimage2.png); background-color: #609; } #box3 { background-image: url(yourimage3.png); background-color: #3C0; } </style> </head> <body> &l

Categories : Misc

Android- Button Sliding Effect
Like I have in one of my projects: a) Create animations public Animation getEditModeAnimation() { TranslateAnimation animation = new TranslateAnimation(0, convertDpToPixel(57, this.context), 0, 0); animation.setDuration(300); animation.setFillAfter(true); return animation; } public Animation getNonEditModeAnimation() { TranslateAnimation animation = new TranslateAnimation( convertDpToPixel(57, this.context), 0, 0, 0); animation.setDuration(300); animation.setFillAfter(true); return animation; } b) Combine with your UI component: Animation editAnimation = getEditModeAnimation(); yourUIComponent.setAnimation(editAnimation); Animation nonEditAnimation = getNonEditModeAnimation(); yourUIComponent.setAnimation(nonEditAnimation);

Categories : Java

Delete session and cookies then create new one - only takes effect at next page load
detect user delete cookies optionally you could create new session data right here redirect to some page of your choosing :) that way it will pick it up correctly (and create new data)

Categories : PHP

sliding image continuosly with fade effect in div in jquery
this the best for doing what you need Link just add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="responsiveslides.min.js"></script> Add Markup <ul class="rslides"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul> and then script <script> $(function() { $(".rslides").responsiveSlides()({ pause: false // Boolean: Pause on hover, true or false }); }); </script> Exampel

Categories : Jquery

Android Sliding Puzzzle Game: the slide effect
Ok, I've managed to find the solution by myself : private void formPuzzle(final ArrayList<PuzzleItem> smallimages) { SMI = new SmallImageAdapter(this, smallimages); puzzle.setAdapter(SMI); puzzle.setNumColumns(SplitBy); puzzle.setHorizontalSpacing(0); puzzle.setVerticalSpacing(0); puzzle.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { startX = event.getX(); startY = event.getY(); smallimage_Position = puzzle.pointToPosition((int) startX, (int) startY); return true; } case MotionEvent.ACTION_

Categories : Android

transition effect for sliding images in a grid in windows phone 7
This might help you. Complete Code Snippet Since the Image is UIElement you can animate in a following way. **For Page Transistion** Here's what it all looks like in XAML: <Page> <toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardIn"/> </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardIn"/> </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition> </toolkit:TransitionService.NavigationInTransition> <toolkit:TransitionService.Navigation

Categories : Image

Sliding Boxes in a page?
Sliding Boxes in a page you mentioned is also known as model window or model box Model window is mainly used to get the user attention. According to the admin setting it will Slide In, Fade In... As you mentioned it could be done using Javascript. Here is a Wikipedia article about model window http://en.wikipedia.org/wiki/Modal_window

Categories : Javascript

how to know when the next/previous page has completely loaded in the page curl effect by harism?
There is method onDrawFrame in CurlView class. There you can see that parts of code where you can determine if page has been completely loaded: if (mCurlState == CURL_LEFT) { --mCurrentIndex; // left curl has been completely loaded //here you can add some code } and if it is right page curl if (mCurlState == CURL_RIGHT) { ++mCurrentIndex; // right curl has been completely loaded //here you can add some code }

Categories : Android

needs jquery to take effect after page reloads, fired from previous page on a click
pass a request parameter at the end of the link like its a get request: /index.html?source=trigger and on the next page check the source parameter and do whatever you want. Click for a good tutorial on how to check url params using javascript

Categories : Jquery

Jquery sliding three divs on page load
How about this? $('#portfolio').click(function(e) { e.preventDefault(); $('#portfolio').animate({ 'right' : '100px' }, 2000); });

Categories : Javascript

How to create a flash light as well as strobe effect. Need help to fix strobe effect
I notice the exception is being thrown at line 29: at com.shyam.flashlight.StrobeController.run(StrobeController.java:29) Is line 29 Camera cam = Camera.open();? You have the correct permissions as described here? Also, are you trying to open a null camera? Look at what line 29 is in StrobeController class.

Categories : Java

Loading a new page with sliding animation in Silverstripe 3 (with Ajax?)
lots of work to do. basically, you'll need to create a template for your pages to be loaded via ajax, containing only the content you'll update on page change, so no <header> etc. next, see http://doc.silverstripe.com/framework/en/3.1/reference/templates#calling-templates-from-php-code on how to render them (Director::is_ajax() is your friend here). on the client side, you might want to go with jquery's ajax functions and catch all internal links on your page, loading them with ajax. simple code example: $(document).ready(function(){ $('a').click(function(){ var $a = $(this); var href = $a.attr('href'); $('body').load(href); e.preventDefault(); }); }); this snippet will load any links with ajax and replace the content of the current pag

Categories : Jquery

popup sliding inwords from bottom right on page scroll down
Html Code: Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some data <br>Some dat

Categories : PHP

JQuery: Sliding Divs - Sliding to the 2nd from the 1st div is fine but breaks after that
So I figured out by using percentages. http://jsfiddle.net/QZCZh/11/ $(".content").animate({ left: "+=" + movePercent + "%" }, 'slow'); EDIT: I was subtracting the scrollbar width rather than adding it. Everything works now.

Categories : Jquery

Implements a sliding menu without sliding drawer Android
Use this one https://github.com/jfeinstein10/SlidingMenu Easy to implement, just add java code of example and create your menu.xml

Categories : Android

Changing Fancy Sliding Form active tab on page load
you can set javascript variable as bellow and use it for your script. sample code with php , <?php $active_tab_from_php = 2 // you should change this, for testing you can hard code echo '<script> var active_tab = "'. $active_tab_from_php . '";</script>'; ?> now you can use this active_tab variable with your script as below, var current = active_tab;

Categories : Jquery

Wordpress sliding drawer plugin doesn't stay closed after converting page to HTML
Is the jQuery script library loading properly? I am doubtful of the src URL of your script at the document head: <script type="text/javascript" src="./jquery.js"></script> These URLs might be the problem. It may work correctly in your local server, but not on a live URL. You may need to change it to "/jquery.js" because the "." refers to the current directory. The "/" right at the start refers to the root URL. <script type="text/javascript" src="/jquery.js"></script> Please try it and let me know the result.

Categories : Javascript

best practice to create app id and app secret for an api
Usually the app_id is public. It is not kept secret. UUID, email address, uuid, or an integer should suffice. For the app secret, any quality PRNG will suffice. The MD5/hashing of random data will simply give you another random token. Your operating system is the best source for random numbers. Every language has a different API to get at it. The feasibility of cracking the secret is a function of the length of the key. A 256 bit key is considered uncrackable under the right conditions. For python, this is the code to get the secret: import os import base64 key_bytes = os.urandom(256) # If you need to pass it in a URL, you could base64 it, # or convert it to hex key_b64 = base64.b64encode(key_bytes) key_hex = ''.join( [hex(x) for x in key_bytes]) print 'b64', key_b64 print 'hex', ke

Categories : Api

DDD practice: Should I create a repository for value objects
To answer the question in the title, no you should not. The repository pattern only works if the items in the repository have identity. If an object has identity then it is an entity not a value object. Value objects should be all or nothing, e.g. changing one property on a value object replaces the entire thing. Thus a value object is immutable after creation. That is not to say that a version of a value object internal to the repository cannot have an identity, but you should not let persistence concerns alter your domain. Based on your description it actually sounds like Allocation is an entity, because it is differentiable and thus has identity. Assuming that Allocation is an entity, the question I would then be asking is should Allocation be its own aggregate.

Categories : C#

jQuery image sliding up instead of sliding right
You need to increment the value function scrollBg(){ //Go to next pixel row. current += step; //increment instead of decrement //If at the end of the image, then go to the top. if (current == restartPosition){ current = 0; } //Set the CSS of the header. $('#header').css("background-position",current +"px 0"); // parameters are right top not top right } Demo: Fiddle

Categories : Jquery

Responsive HTML5 web page: What is best practice?
It seems ok but: Responsive web design has nothing whatsoever to do with HTML5. You shouldn't set maximum-scale nor user-scaleable (which you've got a typo in) to false as the user should be able to scale and zoom in if they want/need to. Remove the xmlns stuff, it's not needed. Don't use inline styles in elements, it's not good practice.

Categories : HTML

Initiating Soundcloud for practice page
Looks like you're missing the full url for the SoundCloud JavaScript SDK (missing http:): <html> <head> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://connect.soundcloud.com/sdk.js"></script> <script src= "script.js"></script> </head> <body> <div id="player"></div> </body> </html> You should be able to run this locally within your browser as SoundCloud supports Cross Origin Resource Sharing headers, removing the restriction on XSS: Of CORS We Do

Categories : Javascript

Is it a best practice to have edit and create actions in same view?
It depends how you manage your frontend. With a RESTful API, and some JS framework like AngularJS, you can only have one page for edit/create, it just doesn't need a mass of code. If your creation or edition is the same, you do not need to separate them. I actually work on a Webmail, and our contact edition page is the same than our edition page.

Categories : PHP

Best practice: multiple CoffeeScript files on a page
Usually it's better to keep your JavaScript code (or CoffeeScript for that matter) in separate files for convenient development, but when deploying on a production server compile them in one file. A browser will then have to make one request to fetch all your JavaScript instead of making multiple requests (note that modern browsers allow 2-4 concurrent requests per hostname). This should lower your page loading time.

Categories : Javascript

How to create this effect with CSS3?
Here is the example Html code <div class="div-wrap"> <div class="div-sec">Lorem ipsum dolor sit amet, blandit quaestio corrumpit ei has. Ei hinc dolor referrentur est. Legere corrumpit scripserit ad his. Eu qui ludus noster efficiendi. Sea iisque eleifend euripidis ea, pri at habeo patrioque. Debet deleniti recteque ne ius, ut albucius urbanitas usu. Eu illum posse viderer sea, an nec percipit verterem, duo id eirmod suscipit tractatos.</div> </div> CSS Code .div-wrap { background-color: #ccffff; padding: 10px; font-size: x-small; } .div-sec { width: 176px; height: 0px; border-bottom: 40px solid #000; color:#fff; border-right: 50px solid transparent; }

Categories : CSS

Best practice: Create custom control or implement using behaviors?
If you are a designer that work in Blend you can easily mix and match behaviors. A custom control can of course also be used in Blend but only the properties and styling can be modified by the designer. As far as I know behaviors were developed by the Blend team to better facilitate "development" by a non-developer. So behaviors have some advantages when working in Blend.

Categories : Wpf

What is the best practice to change MyWSAT page size... css, code, both?
Apparently, neither... the solution appears to be an html header directive... After much searching & experimenting... I discovered the following was necessary: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> ... to the following two files: themes/default/default.master members/themes/default/default.master This will probably pertain to any web page that is being "scaled" improperly on a mobile device.

Categories : Javascript

How to create a scale effect in jQuery
You could use jQuery animate, but I think the css transitions look a lot smoother for browsers that support them. You may want to consider using a conditional comment or something like that so the script is only used when necessary. Working Example $('.cta').hover(function () { $(this).removeClass('dark-grey-bg', 800).addClass('blue-bg-fade', 400).animate({ height: $(this).height() * 1.05, width: $(this).width() * 1.05 }, 300); $(this).find('a').removeClass('grey').addClass('white').animate({ fontSize: '105%' }, 300); }, function () { $(this).addClass('dark-grey-bg', 400).removeClass('blue-bg-fade', 800).animate({ height: $(this).height() / 1.05, width: $(this).width() / 1.05 }, 300); $(this).find('a').removeClass('whi

Categories : Jquery

How can I create an image with television effect?
Sure. You can manipulate the pixels. So you just need to write such a filter yourself. Here is something I came up with. Maybe you can tweak it to your likeing. It takes an image, desaturates the colors a little and then increases the blue part according to a vertical sine function. #include <opencv2/opencv.hpp> #include <highgui.h> #include <cmath> double wavelength = 40; double intensity = 0.5; double decolorisation = 0.7; int main(int argc, char** argv) { cv::Mat img = imread(argv[1]); cv::Mat outImg = img.clone(); for(int i=0; i<img.rows; i++) for(int j=0; j<img.cols; j++) { // desaturate the image double meanColor = (img.at<cv::Vec3b>(i,j)[0] + img.at<cv::Vec3b>(i,j)[1] + img.at<cv::Vec3b

Categories : C++

How to create a top fade effect using UIScrollView?
The views are all subviews of the scroll view so they each have their own alpha. You can act as the delegate for the scroll view and in scrollViewDidScroll you can check the contentOffset and change the alpha of any of the subviews you want.

Categories : Iphone

How to create a frosted glass effect using CSS?
CSS CSS 3 has a blur filter (only webkit at the moment Nov 2014): -webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/ IE 4-9 supports a non-standard filter filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3') See some nice demo for the blur and other filters here. For future reference here is the compatiblity table for css filter. Firefox seems to be getting the feature in v35+ while even IE11 does not seem to have any compatibility. SVG An alternative is using svg (safe for basically IE9 and up): filter: url(blur.svg#blur); SVG: <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> </svg> jsFiddle Demo Javascript You will achieve the

Categories : HTML

How to make this lightbox page effect
This may be helpful for creating light box using jquery. http://www.tonylea.com/2011/how-to-create-your-own-jquery-lightbox/

Categories : Javascript

JavaScript change page effect
Hey try the below code See its WORKING DEMO <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery.js"></script> <script type="text/javascript"> function Close() { $('#div1').animate({ height: 50 }); } function Open() { $('#div1').animate({ height: 100 }); } </script> </head> <body> <div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div> </body> </html> Also take a look at these stuffs Fade in div on page lo

Categories : Javascript

Best practice to create a config file for an existing software programmatically
Are there any constraints on the format of the config file? If not, use YAML (or similar) with two config files: default.yml and deploy.yml. Put the defaults for non-required config params in default.yml and then have Vagrant/Chef/Ansible/bash/whatever write the deploy.yml file. On launch, your app reads both config files, giving precedence to deploy.yml.

Categories : Java

What is the best practice to enable the user to view certain categories on a portfolio page?
I've updated your fiddle below. I supply each filter button with a "data-filter" attribute, then apply this as a class to your gallery using the following script: ;(function(){ var $portfoliogallerySection = $('#portfolio-gallerySection'), $filterbuttons = $('#portfolio-topSection a'); $filterbuttons.on('click', function(){ var $this = $(this); $filterbuttons.removeClass('active'); $this.addClass('active'); $portfoliogallerySection.attr('class', $this.data('filter')); }); }()); Then use css to hide / show appropriately categorised items in the gallery, i'll leave the transitions to you. http://jsfiddle.net/4HFvx/4/

Categories : Javascript

Is it possible to create this background effect using CSS3 and Compass?
If it is possible with pure CSS, it is possible with Sass/Compass. In fact, it wouldn't look a whole lot different than how you would write it with pure CSS: .foo { @include background(radial-gradient(blue, transparent 10em), linear-gradient(black, white)); } You'll need to adjust the radial-gradient to match your image, of course, but it can be done.

Categories : CSS

jQuery - how to create smooth effect for this slider?
I'm not sure what you define as a "smooth" effect, but a really simple solution given your existing code would be to just add a transition:width 1s to your #wrap img CSS. See JSFiddle: #wrap img { width: 100px; clear: both; margin: 0 5px 30px 5px; transition:width 1s; } I'm not sure that I'd construct a carousel like this, I'd probably use positions so that my elements scrolled into the center of screen, but it's pretty easy to Google a solution for that too if that's what you're after.

Categories : Javascript

Script in php to create acrylic effect on image
If you have access to imagemagick's convert utility you can do this. Also looking throught here may give you some luck.

Categories : PHP



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.