w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Is there a way to change the Bootstrap Navbar Height?
The default navbar html code is the following: <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class: .navbar-inner { min-height: 40px; } You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags paddi

Categories : HTML

Navbar fixed top pos. absolute change to relative when scroll
You can't animate the css property position, from the JQUERY API DOCS: All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable. http://api.jquery.com/animate/

Categories : Jquery

jQuery Scroll function : Scroll Top and Window Height 1px discrepancy in value
It is because the browser sometimes adds its own stylesheet as well. That may be the cause of your issue. Try using reset.css. It resets all the browser default css. And its always a good practice to trigger infinite scroll from around 50px of the bottom. You dont wanna have the user to scroll to "the very end" to show next content.

Categories : Jquery

How come a UIViewController's view coordinate system starts after the navbar, but its height includes the navbar?
I already answered your other similar question, but here is one for this. In viewDidLoad you will see the views height as 460 because at that point it hasn't resized to account for the Nav Bar. But If you printed the same frame out in say viewWillAppear you will see that now the frames height has adjusted for the Nav Bar. So if you want to add something in viewDidLoad, you need to add it based on the views frame, add whichever resizing mask will do the job you want, and see it adjust correctly once the view appears.

Categories : IOS

How to make bootstrap3's navbar's input size to fill with the rest of the space?
You could try something like this... (this example shows one way to use Bootstraps Navbar) <div id="wrap"> <div class="navbar navbar-fixed-top" style="z-index:11000"> <div class="navbar-inner"> <div class="container"> <div class="nav-collapse"> <ul class="nav"> <li> - your nave items would each be placed into here </li> <li> - your nave items would each be placed into here </li> <li> - your nave items would each be placed into here </li> </ul> </div> </div> </div> </div> </div> You can place the form tag inside one of the list item tags instead of classifying the nav bar as a form itself.

Categories : Twitter

Animate height change of all UITableViewCells while maintaining scroll position
You can probably find out how much time it takes to perform the first collapse-animation, let's say it takes exactly 1 second. Then I think you'll be able to say something like this: [UIView animateWithDuration:1.0 animations:^{ [self.tableView setContentOffset:CGPointMake(0, newDistance) animated:NO]; }]; This will perform an animation over 1 second, where your tableView starts at current contentOffset, and ends up with the contentOffset you want. I've never used UITableViewRowAnimationAutomatic, or animation for tableView at all for that matter, but maybe you could try some other values as well. Actually, you might be able to fit both those actions into the same animation, if you know what I mean. Which would also give you control over the duration of everything. I don't know if

Categories : IOS

Bootstrap3: Fix the row height
Is it a good practice to have a fixed row height? yes it is. one way of fixing the row height is to add the following css code to that specific page to over load the base bootstrap.css <style> .row{ height:50px;}/* change it to the resulting height after the dynamic change*/ </style> its not recommended to change the base file. if you have other ro's that might change get affected by this change. I'd recommend adding an extra class to those rows <style> .fixed-row{ height:50px;} </style> <div class="row fixed-row"><!-- your fields --></div>

Categories : Jquery

jquery scroll the height of hovered div
$(function () { $(".skip").click(function () { var height = $(this).parent('article').height(); var scroll = $(window).scrollTop(); $(window).scrollTop(scroll + height); }); });

Categories : Jquery

How can I change the background image of a fixed top menu when a user scroll the site to some height
For example using skrollr <div class="menu" data-0="background-image:!url(a.jpg);" data-500="background-image:!url(b.jpg);"></div> Will change the background when scrolling down 500px and change it back when scrolling up again.

Categories : Jquery

Simple jQuery Script Not Working FadeIn/FadeOut Based on Scroll Height (Does on jsfiddle)
You are using jQuery.noConflict() then you try to use $ The code uses scrollHeight() instead of scrollTop() Here it is how it should look your code: (function($){ var $window = $(window); $window.scroll(function(){ if ($window.scrollTop() >= 162) { $('.small-logo').fadeOut(); } else { $('.small-logo').fadeIn(); } }); }(jQuery)); This is your current code: $(window).scroll(function() { if($(window).scrollHeight()>=162) { $('.small-logo').fadeOut(); } else { $('.small-logo').fadeIn(); } });

Categories : Jquery

Twitter bootstrap3: HTML5, non-cross-domain iframe scale width and height
Some options: 1: Try making the iframe responsive. iframes can't automagically expand, so you're going to have to decide on a good height, or use JavaScript. For width, bootstrap has you mostly covered. You do need to make a div around the iframe to respond for it. Then set the iframe's width css to 100%. <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6"> <h1>I'm the left column</h1> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <iframe style="width: 100%;" src="http://..." height="200px"></iframe> </div> </div> </div> demo 2: Don't use an iframe. If it's on the same origin, use a function like $.load. $('#targ

Categories : Jquery

calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div
is that what you are looking for? api.jquery.com jQuery(document).ready(function () { $(window).resize(function() { var height = document.documentElement.clientHeight - 500; if (height < 135) { height = 135; } document.getElementById('left_space').style.height = height + 'px'; jQuery(window).resize(function () { var height = document.documentElement.clientHeight - 500; if (height < 135) { height = 135; } document.getElementById('left_space').style.height = height + 'px'; }); }); });

Categories : Javascript

jQuery smooth scroll doesn't change URL
Replace the click handling code for your anchors like this: $(document).ready(function() { $('a[href^="#"]').click(function() { var target = $(this.hash); var hash = this.hash; if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); if (target.length == 0) target = $('html'); $('html, body').animate({ scrollTop: target.offset().top }, 500, function (){ location.hash = hash; }); return false; }); }); Please note the complete function in the end of the jquery .animate(). It changes the URL. See the demo here.

Categories : Javascript

jQuery: Using scroll() and offset() to change background
this has no chance to work. you need to change it to something like this (this is kinda pseudocode, just to give you a picture: sections = []; $(document).ready(function() { $('section').each(function() { sections.push($(this)) }); }) $(window).scroll(function() { var s = $(window).scrolTop(); var currentIndex; for ( var i = 0; i < sections.length; i++) { if (( s > sections[i].offset().top) && ( s <= sections[i+1].offset().top)) { currentIndex = i; } } $('#background').css('background', bgFront + (i+1) + bgBack); })

Categories : Javascript

How have icons/lines change color on scroll down using Jquery/CSS?
You can check the scroll height and alter the CSS via jQuery using the .scroll() event Fiddle: http://jsfiddle.net/UR5wP/

Categories : Jquery

How to Change scroll position using jquery smooth scoll
It looks like what you want is the offset setting: ... $.smoothScroll({ scrollTarget: link.hash, offset: -50 }); ... You might also want to use scrollElement: null to ensure you scroll the whole document. From: https://github.com/kswedberg/jquery-smooth-scroll#fnsmoothscroll

Categories : Jquery

How do I change the color of each element on scroll using jQuery offset()?
What about: var num = $('#menu-1').offset().top; var num2 = $('#menu-2').offset().top; You may have to fiddle that slightly to take account of margins and borders depending on the style. A better way would be to give all the menu items a single class, then loop through them all with $('.menu-class').each(...) and decide what to do given their (adjusted offset) and the current position. Which would make it extensible to more elements.

Categories : Jquery

Execute function on height change using jQuery
$('.mydiv').resize(function() { if($(this).height() > 400){ $('body').removeClass('normal height bigheight').addClass('bigheight'); } else if ($(this).height() > 200){ $('body').removeClass('normal height bigheight').addClass('height'); } else if ($(this).height() > 0){ $('body').removeClass('normal height bigheight').addClass('normal'); } else { $('body').removeClass('normal height bigheight'); } });

Categories : Jquery

jQuery height change not working in Safari
Okay, so I've worked it out... In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9! I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.

Categories : Javascript

Bootstrap 100% height with navbar
Probably because it is adding the default margin from the navbar. Try this: .navbar { height: 40px; position: relative; margin: 0; padding: 0; } Also, try changing the min to max height: max-height: 100% !important;

Categories : HTML

dynamically change height of div jquery on window resize
OK this is what I got from your question : You want to find maximum height of div.demographcont elements and set this value for the rest of elements .After page load we will have some thing like this <div class="box clearfix"> <div class="demographcont" style="height:304px">...</div> <div class="demographcont" style="height:304px">...</div> </div> Now again on window resize you want to do the same thing but as I told you in comment it's not possible because you already set the same height inline.Otherwise I'm not getting your question. So try adding auto height property then doing the rest of proccess: function setHeight() { $('.box').each(function () { var tmpHeight = 0; $(this).find(".demographcont").each(function (

Categories : Javascript

Change the height and width of the Supersized plugin for jquery
Ahh, I found the answer to this question. They information on the superslider website was a bit incomplete. The first thing to do is change the supersized.css file. Change the #supersized and #supersized li position property from fixed -> absolute. The second thing to do--omitted in the instructions--is to change the height and or width properties in the #supersized and #supersized li properties to reflect your new desired height and width. This last part was a bit tricky, because it falls through the inheritance gap. The property has to be set in the supersized.css. In my case, changing the slider height and width properties in the site main.css--which was the bottom entry in my CSS link files, did not affect this property, as the framework did not directly address the #supersized id.

Categories : Javascript

JQuery/CSS3: Animating auto height change
One way to do this is to animate the content height. The parent's height will then follow automatically. Whether this will work for you depends on how the content height is changing but if the content is a fixed height then it should be possible with the following CSS: .container { width: 500px; height: auto; border: 2px solid blue; } .container .content { with: 100%; height: 200px; transition: 1s height; } When you change the height of .content with javascript, the height of .container will also be animated. You can see this in action here: http://jsfiddle.net/MBD6z/ I'm not sure if this will work in your case... I'd need more details on how the content is changing but this is one way of doing it.

Categories : Jquery

Decreasing height of bootstrap 3.0 navbar
if you are using the less source, there should be a variable for the navbar height in the variables.less file. If you are not using the source, then you can customize it using the customize utilty that bootstrap's site provides. And then you can downloaded it and include it in your project. The variable you are looking for is: @navbar-height

Categories : Twitter

navbar collapses on mobile with chrome/safari on scroll
Fairly simple problem. A mobile device does not have a constant mouse. Which means hovering wont work!. Make a simple work around like: Click once to open menu -> Click agian to click on menu item -> and close menu When open and user doesnt want to click on any menu item -> Click next to the menu -> close the menu Fairly simple really, goodluck

Categories : Javascript

jQuery To Make Coumns Same Height - After Font/Text Change
Okay, I actually finally figure out what I needed. The final code looks something like this: // Reset max height for each class var intMaxHeight = 0; // We MUST remove all heights from the various DIV elements // NOTE: If we don't do this then the height will stay the same no matter what // after the first call - it will just stay the same as the first intMaxHeight $(".content-box-content").each(function() { $(this).css("height", ""); }); // Set the max height of the tallest column $(".content-box-content").each(function() { if (intMaxHeight < $(this).height()) { intMaxHeight = $(this).height(); } else { intMaxHeight = intMaxHeight; } }); // Set all columns to the height of the tallest column $(".content-box-content").each(function() { $(this).

Categories : Jquery

Bootstrap Collapsed Responsive Navbar Height
I found that the problem was actually the last div with a class of "loader pull-right" that was causing the problem. I worked around the problem by moving this div inside the div with a class of "nav-collapse collapse". Not entirely satisfactory - but better.

Categories : Twitter

How to change a navbar UIBarButtonItem button to a navbar back button?
Those buttons are created automatically when you do a push segue. For your particular problem, you can call perform [self dismissModalViewControllerAnimated:YES] in the case of modal segues, or [self.navigationController popViewControllerAnimated:YES]; for dismissing custom push segues. Anyway, I don't know any method to change the button style to the "left arrow", other than selecting a background image with your particular "button".

Categories : IOS

How to change URL(hash) when user scroll or click on the link with jquery history plugin
Try this, var lastScrollTop = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ // downscroll code window.location.hash='musection2'; } else { // upscroll code window.location.hash='musection1'; } lastScrollTop = st; }); From How can I determine the direction of a jQuery scroll event?

Categories : Javascript

whats wrong with this code? im trying to change the height of each section to the height of window
Seems like a strange way to do that ? $(window).on('resize load', function() { $('#home, #about, #skills').height( $(this).height() ); }); You have to update the variables when the window changes size, i.e. inside the resize function EDIT: You'll also need a DOM ready handler, and window.onload isn't always triggered when doing it that way, so just do the same thing on DOM ready, like so : $(function() { $('#home, #about, #skills').height( $(window).height() ); $(window).on('resize', function() { $('#home, #about, #skills').height( $(this).height() ); }); }); FIDDLE

Categories : Javascript

Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
I faced the same problem with BS3, and the only way I found to resolve it was to use a combination of pull-left and 'pull-right'.. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header pull-left"> <a class="navbar-brand" href="#">BRAND</a> </div> <div class="navbar-header pull-right"> <ul class="nav navbar-nav pull-left"> <li> <a href="#">Fixed Link</a> </li> </ul> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <spa

Categories : HTML

Change horizontal scroll to vertical scroll
try word-wrap .content_comments { word-wrap: break-word; height: 90px; width: 500px; overflow-y: auto; overflow-x: hidden; border-style: solid; border-width:thin; }

Categories : CSS

CSS Div Scroll Height
Although I said that this wasn't a solution for your problem, it seems that it's actually a solution. Add a class after each action. Something like expanded and collapsed for each situation, and check if that class is present before doing the animation. That way the animations won't trigger until it's necessary. This avoids triggering the animation multiple times queuing the animation. That's why if you scrolled down a lot of times and scrolled back to top, the "expanding" animation triggered long after you scrolled up (it had to wait that each "collapsing" animation ended) My test was: $(window).scroll(function(){ var $header = $('#header'); if ($(this).scrollTop() > 50){ // x should be from where you want this to happen from top// if (!$header.hasClass('collapsed'))

Categories : Javascript

JQuery Scroll controls opacity of a Nav to fade in, how to stop Nav fading out on reverse scroll?
Use this: (woking jsFiddle) function EasyPeasyParallax() { scrollPos = $(document).scrollTop(); $('#nav').css({ 'opacity': 0+(Math.min(scrollPos/800,1)) }); }; $(function(){ $('body').bind('mousewheel',EasyPeasyParallax); }); Note: I've used mousewheel event however you can detect the scroll in any way you'd like. also note Math.min() usage so the value of opacity will not exceed 1 Another note: use .stop().animate() instead of .css() for a nicer looking fade effect jsFiddle.

Categories : Jquery

JS - jQuery - Tw Bootstrap - block user to scroll body but show scroll bars
Just set a scroll event and put the scrollTop back to 0 or the last known position, then unbind the scroll event when done. function modals(){ $('.modal').hide(); $('.modal').on('show shown',function(){ var top = $("body").scrollTop(); (function(pos) { $(window).scroll(function(e) { $("body").scrollTop( 0 ); //OR $("body").scrollTop( pos ); }); })(top); }); $('.modal').on('hide hidden',function(){ $(window).unbind("scroll"); }); }

Categories : Javascript

Change parent's height to child's height
Just call the destroy, and resize the div. Try $("#test").click(function() { var div = $('#dot3'); div.trigger('destroy'); div.css("height", "auto"); }); Here is fiddle.

Categories : Jquery

how to add scroll to div that have no fixed height
You could use javascript to determine the height of the window and after that set the max-height css property like @Fags suggested. <script> $(function() { var $window = $(window); var setMaxHeight = function() { $('#div_id').css('max-height', $window.height()); } $window.on('resize', setMaxHeight); setMaxHeight(); }); </script>

Categories : CSS

Use JS/jQuery to scroll a div's content that has overflow: scroll applied
Use jQuery .scrollLeft(). For example if you want to scroll 300 pixels: $("a.your_link").click(function(){ $("#your_container").scrollLeft(300); });

Categories : Javascript

height not changing in scroll function
Would you consider using CSS to style the small state of the header? Whenever the scrollTop is greater than 20px, add the small state class and whenever it's less than 20px, remove it. Demo: http://jsfiddle.net/NphFw/23/ In relation to your problem, I'm not sure jQuery can animate to dynamic values such as auto or inherit even.

Categories : Jquery

load more scroll based on div height
I would do it with javascript and css DEMO http://jsfiddle.net/kevinPHPkevin/tnTPw/2/ $('.div').click(function () { $(this).addClass('height'); });

Categories : Javascript



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