w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Twitter Bootstrap: Scrollspy init using JavaScript / jQuery
After a little digging... The documentation is wrong. As this question points out, you're supposed to use .scrollspy() on the content, not the nav. But then how do you target the correct nav? It turns out, you have to target the parent of the ul.nav, and you can pass it to .scrollspy({target: '.navparent'}); like so. http://jsfiddle.net/G75m3/2/ Hope this helps someone!

Categories : Twitter

AngularJS Finding all Hidden Input in a scope WITHOUT Jquery
If you really need to access those hidden fields within your controller (which is not good a practice with angular, as @Ye Liu said above) try angular.element("input[type=hidden]"); It will give you a list with all the hidden inputs. You need to have jquery linked up in your html file before angularjs script.

Categories : Javascript

Preview Image before uploading Angularjs
OdeToCode posted great service for this stuff. So with this simple directive you can easily preview and even see the progress bar: .directive("ngFileSelect",function(){ return { link: function($scope,el){ el.bind("change", function(e){ $scope.file = (e.srcElement || e.target).files[0]; $scope.getFile(); }); } } It is working in all modern browsers! Example: http://plnkr.co/edit/y5n16v?p=preview

Categories : Ajax

How to detect the value of color picker in text input and show it in preview instantly?
You can add onChange event. var myOptions = { // a callback to fire whenever the color changes to a valid color -----> change: function(event, ui){}, <----------------------- }; $('.my-color-field').wpColorPicker(myOptions);

Categories : Jquery

Commonsware camera preview demo: no preview after device on/off
It is not a solution, but a workaround: invoke setContentView() in onResume(). It can be either protected void onResume() { super.onResume(); setContentView(R.layout.xxx); // ... } or private View cachedContentView; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); cachedContentView = doCreateContentView(getLayoutInflater()); // ... } protected void onResume() { super.onResume(); setContentView(cachedContentView); // ... } Both of them work. I still have no idea what causes the problem and what is the difference between the original example and the library.

Categories : Android

Camera Preview Issue - Preview becomes pixellated and distorted
if anyone like me (learning the ropes) comes across this same issue, what my problem was I had added camera.setDisplayOrientation(90); in order to rotate the preview to portrait. My problem was, I had called this in the wrong place, I now call it in the onResume() method. A simple fix in the end...thanks everyone

Categories : Android

How to preview image before uploading in jquery
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#previewHolder').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#filePhoto").change(function() { readURL(this); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg"> <img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px"/>

Categories : Jquery

RoR: jQuery jCrop, not properly cropping in preview
Your dimensions seem wrong: You should consider variable dimensions images so, I suggest you Study this jquery example it may be helpfull to you (I hope) It does it dynamicaly JS jQuery(function ($) { $('.aDimension').each(function () { var jcrop_api, boundx, boundy, //updateable coords coordX = 0, coordY = 0, coordH = 0, coordW = 0, //preset currentWidth = $(this).find('.dimensionedAvatar').attr('w'), currentHeight = $(this).find('.dimensionedAvatar').attr('h'), $loading = $(this).find('.loading'), $complete = $(this).find('.complete'), $cropItNow = $(this).find('

Categories : Jquery

How can I add a class to an input if the input is changed with AngularJS?
Take a look at this jsfiddle: http://jsfiddle.net/hNrEV/2/ The main idea is using $scope.$watch to watch for changes to the input box. I gave it an id of rowTitle, and used a directive called watchRowTitle that watches for changes to $scope.row.title, and adds a class 'red' that colors the text red whenever the text in the input box is equal to 'wrong title'. It is probably good practice to do DOM manipulation in directives. Here, the watchRowTitle directive returns an object with 4 keys: template - the html that replaces the watch-row-title tag. we dont need this here scope - Here we make use of an isolated scope. Basically, the '=' establishes a 2-way data binding between between scope.title inside the watch-row-title directive and the $scope.row.title value inside the MyCtrl control

Categories : Angularjs

Create live preview of image (before upload it) using JQuery
If you need it as getting nice effect then you could use flash like they do in https://github.com/mailru/FileAPI But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.

Categories : Javascript

Why does tumblr jquery ui addclass easing work in preview but not blog
As far as I can tell from inspecting the code on your webpage, the class 'postFullHeight' is indeed getting added after two seconds. Class postFullHeight is just adding height 100%. Browser seems to be having problem picking up height 100% but if I change it to absolute number like 700px. it works just fine. UPDATE Based on discussions in comments there are two options you can try. In the postFullHeight try setting the height : auto; to see if it works. I should ideally set the height to natural height based on its contents. If that doesn't work, try wrapping all the contents inside it in one div with a particular id, and then you can set the height of .post by caculating the height of inside div using the .height() function on inner DIV.

Categories : Jquery

How to load html contents from stream and then how to create style sheet to display the html file in preview pane (like HTML preview handler)
You mean you want to make HTML Browser inside a window? please take a look at this link. http://www.codeproject.com/Articles/3365/Embed-an-HTML-control-in-your-own-window-using-pla if this isnt what you want, please explain what you mean by "preview handler for HTML"

Categories : C++

Scrollspy with symbols in id
plus signs are not allowed in id values, see: What characters are allowed in DOM IDs?. Why should using plus signs help your SEO? Maybe also read: URL encoding the space character: + or %20?. Consider to replace the + with a _

Categories : HTML

How to implement a scrollspy in angular.js the right way?
There are a few challenges using Scrollspy within Angular (probably why AngularUI still doesn't include Scrollspy as of August 2013). You must refresh the scrollspy any time you make any changes to the DOM contents. This can be done by $watching the element and setting a timeout for the scrollspy('refresh') call. You also need to override the default behaviour of the nav elements if you wish to be able to use the nav elements to navigate the scrollable area. This can be accomplished by using preventDefault on the anchor elements to prevent navigation and by attaching a scrollTo function to the ng-click. I've thrown a working example up on Plunker: http://plnkr.co/edit/R0a4nJi3tBUBsluBJUo2?p=preview

Categories : Twitter

Bootstrap scrollspy won't work
I believe you're missing the .nav class in your menu. From the docs: Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component. So just add the class to your menu <ul>: <div id="nav-menu"> <ul id="menu" class="nav"> <li><a href="#header">Home</a></li> <li><a href="#work">Work</a></li> <li><a href="#about">About</a></li> </ul> </div> Also, the result you'll get from the scrollspy plugin is an .active class being added to your list items, so I'm assuming you'll want to add a rule like this one to your CSS to go with your current styles: #menu li.active:after { height: 6px; }

Categories : Jquery

Scrollspy doesn't change until you get to the bottom
I assume you want the Scrollspy to apply as soon as a section comes into the viewport. I suggest you to use the data-offset-tag and set it to the viewport height. Just add the following to you body-tag (which is the element you spy on): data-offset="$(window).height();" Your body opening tag then should look like this: <body data-spy="scroll" data-target="#navbar" data-offset="$(window).height();" style="zoom: 1;">

Categories : Javascript

Twitter Bootstrap - Scrollspy ignore ID
I've found a solution without adding extra markup, but this is not so beautiful. The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted. I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version. A solution for your problem may be : <nav> <ul class="nav"> <li class="current"> <a href="#home">Home</a> </li> <li> <a href="#leistungen">Leistungen</a> </li> <li> <a href="#">Preise</a> </li> <li>

Categories : Javascript

bootstrap: how to stylise navbar when using scrollspy?
It's a good idea to not modify the core files as you are carefully avoiding (good stuff). Here is a working demo of the explanation below As you are aware, when writing CSS if you do this: div { background: #666; width: 100px; height: 100px; } and then you do this anywhere that comes after the above snippet: div { background: #000; width: 100px; height: 100px; } It's safe to say that the <div> will be black (#000) because it's defined later (means below) the dark gray #666. So with that said, since you may come across other .nav classes in your build, it's good that you are giving your .nav another class that is unique so you can hook to it without affecting all the .nav's on your markup. I would recommend that you make a new stylesheet (probably call it: custom

Categories : Twitter

Hide input field and make them 3 separate input fields with jQuery and put the value in the one
Try this $(document).ready(function(e){ $('#profiel_rekeningnummer').parent().append('<input name="field1" id="field1" class="field"/><input name="field2" id="field2" class="field"/><input name="field3" id="field3" class="field"/>'); $('.field').blur(function(e){ $('#profiel_rekeningnummer').val($('#field1').val()+$('#field2').val()+$('#field3').val()); alert($('#profiel_rekeningnummer').val()); }); }); EXAMPLE

Categories : Jquery

loop into input array field and change input fields using jquery
Try this: var all_inputs = $("input[name^=Item\[fields\]]"); for (i = 0; i < all_inputs.length; i++) { if (i % 3 == '0') { var val = all_inputs.eq(i).val(); //get the new value for each group of 3 } all_inputs.eq(i).val(val); //assign the value to inputs in this group of 3 } Demo here

Categories : Jquery

Twitter Bootstrap Scrollspy skipping element
If you inspect element (using chrome) on the pricing h1 and hover over the element in the code inspector, you'll notice the h1 area seems to be covering almost the whole page. It looks like you've either got some error in your html, or some unusual CSS rules causing it's area to be so large EDIT - on second look, your pricing h1 looks to be outside of the twitter bootstrap guidelines of <div class="row"> <div class="span#"></div> <div class="span#"></div> </div> yours is like this <div class="row"> <div class="span#"></div> <div class="span#"></div> <h1 id="pricing"></h1> </div> I'd guess sticking it back into a <div class="span#"> would fix it

Categories : Twitter

How to stop twitter bootstrap scrollspy at a certain distance?
Assuming that you already have your side nav setup and working with twitter bootstrap you would use the data-offset-bottom to stop it from scrolling in your footer. Heres an example: <div id="leftnav" data-spy="affix" data-offset-top="149" data-offset-bottom="385"> You will have to play around with the numbers so that it works with the sizes of your footer so it will stop before it reaches the bottom. You can read about it here. Hope that helps.

Categories : Javascript

How to add time delay and fix position to Bootstrap 3.0 scrollspy?
for the time delay, when i understand you well, try something like: var tmp = $.fn.scrollspy.Constructor.prototype.process; $.fn.scrollspy.Constructor.prototype.process = function () { console.log('ff wachten') var that = this; setTimeout(function(){tmp.call(that)},5000); } Add this after the inclusing of scrollspy.js. But ou also will have to add a delay on the click event it self like: (from: http://www.jquery4u.com/jquery-functions/delay-sleep-pause-wait/) function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } $('.navbar-nav a').click(function(){sleep(5000); console.log('slept'); return true;}); Now you got a double delay, so make a combina

Categories : Twitter

How to deactivate Bootstrap's scrollspy for mobile viewports?
The fix is easy enough. Use media queries and define position:static; for your sidebar-nav div for mobile views, eg @media (max-width: 767px){ .sidenav.affix { /* change sidenav selector to match your layout */ position: static; /* removes the affix behaviour */ width: auto; /* customise as required */ top: 0; /* customise as required */ } }

Categories : Javascript

Twitter Bootstrap Scrollspy highlighting last item only
It's the body you want to spy on. Instead of <div data-spy="scroll" > use <body data-spy="scroll" data-target="#navbar">

Categories : Javascript

Bootstrap scrollspy and sticky navigation not working together
A link that helped me work through some issues: http://mtjhax.wordpress.com/2013/02/11/twitter-bootstraps-scrollspy-plugin-needs-better-docs/ Also important: Set up Affix Give the nav element a data-spy="affix", data-offset-top="", data-offset-bottom="" where offset from top or bottom tells the browser when to switch the positioning of the nav element. (Note: affix-top is usually position: static, affix is usually position: fixed, and affix-bottom is usually position: absolute.) Get the positioning right Make sure to set in your css a "position: _____;" and "top: __px" for each of these states. (Possibly, you only need to set a top for .affix, position & bottom for .affix-bottom, and nothing for .affix-top.) Solve flickering issues If you've had issues with flickering of the na

Categories : Javascript

How to make a Twitter Bootstrap 2.x navbar using scrollspy
From your source: add <!DOCTYPE html> to the top of your document the data-target in your body tag should contain a css selector. In your case #navbar or .navbar instead of navabar. b.e. data-target="#navbar" see this question: Twitter Bootstrap scrollspy always selecting last element so use: $('body').scrollspy(); gives none selected / active on page load; add class="active" to the first li in your code. Or $('.nav li:first').addClass('active'); to the bottom of your document.

Categories : Javascript

Using bootstrap scrollspy for a div with collapse, to an affixed sidebar
You should call .scrollspy('refresh') : $(document).ready(function () { $('.accordion').on('shown hidden', function () { $('body').scrollspy('refresh'); }); });

Categories : Javascript

Bootstrap 3 Scrollspy Activate Event Not Firing
Your markup for scrollspy is a little off. Scrollspy may not be firing which is why you are probably not getting any results. In my experience it's much easier to user data attributes to initiate scrollspy. And I haven't read one report of it working if you append the scroll listener to any other element than the body itself. You should apply them to your body tag like this. <body data-spy="scroll" data-target="#YOUR NAV CONTAINER"> Also, you need to make sure that your navigation structure is like this: <div id="YOUR NAV CONTAINER"> <ul class="nav"> <li><a href="#SECTIONID">list item</a></li> <li><a href="#SECTIONID">list item2</a></li> </ul> </div>

Categories : HTML

jQuery input prob disable false by clicking the input
Seems like your logic is reverted. Disabled=true means actually that element is disabled (not clickable). Try this way: $(document).ready(function() { $(this).removeProp("disabled"); $("input").click(function() { $("input").prop("disabled", "disabled"); }); });

Categories : Jquery

Custom input is not working in jQuery Token input plugin
Test with @Cindrella: $("#responsible").tokenInput( [ {id: 7, name: "a@gmail.com"}, {id: 11, name: "b@gmail.com"}, {id: 13, name: "c@gmail.com"}, {id: 17, name: "d@gmail.com"}, {id: 19, name: "e@yahoo.com"}, {id: 23, name: "f@gmail.com"}, {id: 29, name: "abc@gmail.com"}, {id: 31, name: "ab@gmail.com"} ],{ prePopulate: respArray, hintText: "Enter mailid", allowCustomEntry: true, theme : "facebook", noResultsText: "O noes", searchingText: "Searching...", minChars: 1, tokenLimit: 1, tokenValue: "name", allowFreeTagging: false, // !ADD THIS ! pre

Categories : Javascript

jQuery Masked Input plugin not working on form input?
You're declaring a $( document ).ready(function (e) { function inside a Jquery(function($), which is wrong... jQuery(function ($) { $( document ).ready(function (e) { ... } } You can't use these 2 functions together, since they hook to the same event. See here in the documentation. Solution 1 jQuery(function ($) { ... } Solution 2 $( document ).ready(function (e) { ... }

Categories : Javascript

ScrollSpy show wrong active tab when used with JS tabbed content
try this: jsfiddle if Scrollspy highlight final element, you can add height: 100% to html and body tag

Categories : Javascript

Twitter Bootstrap Scrollspy: wrong item highlighted
I also have an issue like this, move your data attribute to the body and it'll work. <!DOCTYPE html> <html> <head> <!--<script src="http://code.angularjs.org/1.0.7/angular.js"></script>--> <script src="./jquery-1.9.1.js"></script> <script src="./bootstrap.js"></script> <link rel="stylesheet" href="./bootstrap.css" /> </head> <body data-target="#navbarExample" data-spy="scroll"> <div id="navbarExample" class="navbar"> <ul class="nav"> <li><a href="#abc">abc</a></li> <li><a href="#def">def</a></li> <li><a href="#ghi">ghi</a></li> </ul> </div>

Categories : Javascript

how to change bootstrap scrollspy active link color
You shouldn't be editing the Bootstrap CSS files directly but rather editing the less files and then recompiling those to CSS. I can't remember for certain but the colour variables you are after are more than likely in the Variables.less file. A way to play around with the colour schemes is to customise your bootstrap download (link is from the 2.3.2 version, Bootstrap 3.0 is out)

Categories : HTML

What is the minimum code to make ScrollSpy bootstrap sidebar like the example?
See if this helps: http://jsfiddle.net/panchroma/rWYQu/ In the body tag add <body data-spy="scroll" data-target="#side-nav"> ( see fiddle options left hand column) Wrap your side nav bar in a div with this same data-target ID: <div id="side-nav" > You probably want to add the class affix to your side nav so that it stays in place: <ul class="nav nav-list affix"> Add a unique ID to each of the links in your side nav: eg <li><a href="#one">One</a></li> In the main body of the page, add sections with IDs that match the links in your side bar: eg <section id="one"> Section 1 </section> That's it! EDIT How do I get it to style like the Bootstrap example on their site though? Here's a variation if you want stying si

Categories : Twitter

Bootstrap scrollspy offset on a fixed navbar does not work
You need to apply the offset to the body. $('body').scrollspy({ offset: offsetHeight }); Also, you will need to subtract at least one from the offsetHeight in the line below, otherwise it will not work when scrolling up. var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);

Categories : Jquery

Jquery input value does not change if value in depending input changes not manually
when values are changed by script, events like change are not fired, you need to fire them manually. You can trigger the events manually using the .trigger() method provided by jQuery or by using its short hand version as shown below $(".exchange_rate_changed1").on("change", function () { $('#is_exchange_rate_changed1').val(1).change() }); $(".exchange_rate_changed_test1").on("change", function () { $('#is_exchange_rate_changed_test1').val(1).trigger('change') }); Demo: Fiddle

Categories : Javascript

if input two input tag have same value then give alert - javascript only no jquery
How about this: <script type="text/javascript"> function getResults() { var radios = document.getElementsByTagName("input"); var values = new Array(); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { var found = false; //Represents if we have a duplicate for(var j = 0; j < values.length; j++) { //Loop through previous items if(values[j] == radios[i].value) { //Duplicate? found = true; // Flag it break; //Exit 'j' loop } } values[values.length] = radios[i].value; //Add value to previous items if(!found) continue; //If there was no duplicate, continue to next item alert(radios[i].value); //The

Categories : Javascript

Autofill an input when another input is filled using jquery chosen on both
Use this line: $('#shipping option[value="'+value+'"]').prop('selected', true); Beware that if you select "United States" or "United Kingdom", they will show twice in Chosen plugin, since those options exist twice in your html, but you can use the :first selector to avoid this $('#shipping option[value="'+value+'"]:first').prop('selected', true); EDIT Here is the code working: http://jsfiddle.net/rf90210/uZBXM/2/

Categories : Jquery



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