I have a fixed header that I would like to add a dynamic blur as the user scrolls down the page. I learned that the filter: blur(10px) only works for elements within the applied div.Could anyone point me in the right direction?
Updated: What I want to do is make anything that is underneath my fixed header appear blurred, not the actual header itself. I think I would have to make parts of the div under the header blurred rather than the whole div to achieve this effect.
Yes, add dynamicaly a classname with jquery.
http://api.jquery.com/scroll/
$(window).scroll(function() {
$( "#tag" ).addClass( "blurredclass" );
});
You can define a variable within scroll function to check offsetTop position, so you can add blurred class after you reach your position
var screenTop = $(document).scrollTop();
Edit: you can preview typical solution on JSFiddle
http://jsfiddle.net/x2N3N/1/
Edit2: if you want to blur text below some position while scrolling:
http://jsfiddle.net/x2N3N/2/
Edit3: variant with blurred header:
http://jsfiddle.net/x2N3N/3/
There is another option to help you solve your problem. If you want to blur the header background while scrolling the page (e.g. in iOS7 on iphone) the solution exists:
Using experimental methods:
http://codepen.io/FWeinb/full/Dfoaw
But problem is compatibility and speed:
Chrome 29+ (enable 'experimental-webkit-features'/'enable-experimental-web-platform-features')
Safari 6.1 Seed 6
iOS7 - slow
Next method is to blur rendered html in canvas
More info and example: http://blurpopup.labs.daum.net/
run html2canvas for rendering document as an image.
Convert image to data-url string and and place it as background-image.
apply blur (-webkit-filter:blur ... )
Append the bg layer into document with position of document scroll offset.
You can find html2canvas here: http://html2canvas.hertzen.com/ (it's a simple js library)
I've done complete live example with basic usage:
http://www.24development.cz/examples/blurred-header/
There are some limitations with html2canvas rendering, but for basic idea there is the point.
Related
I am using pure Polymer/Javascript and need to scroll to the bottom of my main panel. Since it is a scrollable element within a fixed-size container the typical JS answer
window.scrollTo(0,document.body.scrollHeight);
Does not work.
Couldn't find a direct solution so posting an the answer myself. Hope this helps someone :)
(Based on what I found here)
//Get the main paper-drawer-panel element
a = document.querySelector("paper-drawer-panel [main]")
//use the undocumented scroller property and set it to the scroller's height
a.scroller.scrollTop = a.scroller.scrollHeight
UPDATE:
I also discovered that if you select any element or container within the panel there should be scrolling methods attached to them allowing you to to scroll to the top or bottom of the panel based on the selected element.
//Get the main paper-drawer-panel element
a = document.querySelector("some-element-container-in-paper-panel");
// Passing in false scrolls to the bottom of the container, no param to the top.
a.scrollIntoView(false)
I may not comment (I need 50 points of something) but scrollIntoView() is experimental technology. Not supported by Chrome.
I've got a webpage with a full-screen canvas. Over the canvas I'm going to place and position divs that will contain UI elements for the canvas. I'm using jQuery to create the divs and give them the css style they need. I also re-position and/or re-size them in JavaScript upon window re-size. The problem is, as soon as I enter even one space into a div, FireFox says 'NO!' and seems to ignore any css changes made by JavaScript, even if I remove the content of the div again.
Here's some technical details:
The div I'll show is a fullscreen div that overlays the canvas and functions as dim-screen in case there are dialogs the user has opened so the canvas appears darker and extra attention is pulled towards the dialog.
The css I'm using is:
.ui_layer {
position: absolute;
top:0px;
left:0px;
}
#ui_layer_dim {
background-color: #000000;
opacity: 0.5;
}
In JavaScript I have my own function that creates the div, but it runs this jQuery:
$("<div id='ui_layer_dim' class='ui_layer' style='z-index:1'/>");
Then, on onWindowResize (tiggered by a window 'resize' eventlistener), I change the div's width and height to fit the new window size:
gameUI.layers["ui_layer_dim"].onWindowResize = function() {
this.css("width", window.innerWidth + "px");
this.css("height", window.innerHeight + "px");
};
In Chrome this works perfectly, even if I place content in the div. FireFox works, but only when the div is in it's initial state. One change to the div's contents and 'BOOM it goes': No more dynamic sizing.
I've tried the different css position settings, tried setting the width and height attributes using the css function, using the style function of the element and using setAttribute to see if it's caused by some sort of incompatibility; the results didn't change.
I've run a series of tests to see what happens to the html as soon as content is placed into the div and noticed something weird: The inspector and css rules won't show changes to the width and height of the window's innerWidth and innerHeight. Neither does the div itself, but I've set up some logging to view info about the window's innerWidth and innerHeight before setting the div's width and height and some logging about the div's width and height after setting it, and that actually shows the correct dimensions...
After building and testing the system for several days I have no clue anymore what could cause the problem. Like I've said before: Chrome works as it should so I know my code technically works, but it might just be that a different approach is needed to make it work in FireFox. I hope anyone knows. Help would be greatly appreciated!
Edit: Here's a fiddle with the code, try running in FireFox, resize the result, it should resize the grey div as well. Now, right click the result, go to the inspector and put some text or even a space inside the div and resize again. Not working for me. Link: http://jsfiddle.net/UsLL6/
Edit 2: Here's a screenshot that will hopefully clear up the problem I'm having. Marked yellow is the initial state of the browser width, I set it to very narrow to be able to show the problem more clearly. Marked orange is the state after I made the browser wider a bit. You can see the grey div doesn't resize with it as it should, neither do the inspector value and the CSS rules value, but the console shows the correct value. The first ("Setting property:.....") was retrieved from window.innerWidth, the second ("Property height now has....") was retrieved from the actual width property from the div element using style.getPropertyValue.
Just noticed IE gives the same result as FireFox, but yea..IE....
Is your gameUI.layers known by mozilla?
Did you try the jQuery solution?
$(window).resize(function(){
$('#ui_layer_dim').width(window.innerWidth);
$('#ui_layer_dim').height(window.innerHeight);
});
When adding and removing content from the div using JavaScript it works. Even though the problem does not exist for me anymore I'm still very confused by the fact that editing the div in the FF inspector creates such a weird result.
I want to create scroll behavior like what can be found here. If you scroll down the page you will notice the crabs, sharks, waves etc are animated whenever the page moves. How can this be achieved? Is this a script or CSS animation?
Edit: text bubbles also appear and disappear at different scroll points.
If you would like a more robust jQuery script to help you out: Per the answer at Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?:
A slightly more full fat solution to the already great one suggested
by Justin is to use jQuery Waypoints to manage the in viewport events.
...
(the answer by Nicholas Evens)
It is a script, just bind a function to the window 'scroll' event with a callback function to do whatever you want. You can tell how far you've scrolled with window.scrollY.
$(window).bind('scroll', function () {
console.log(window.scrollY);
});
You need to subscribe scroll event using jQuery and move your element basing on the scrolling offset whitch can be reached using .scrollTop() property
$(window).scroll(function () {
var scrollOffset = $(this).scrollTop();
// move element to the offcet
});
I didn't look at the site's source code, but I believe it depends on JS. Javascript is necessary to listen to the scroll event of the page, and act according to the current value of document.scrollTop. Then the elements can be positioned with JS, and images can be switched either directly in JS, or by using CSS to change some element's CSS class.
That is definitly a script, you can attach an onscroll event and get the percentage of the current scroll and just position your "crabs" depending on that.
There was already a lot of scripts of how to get the percentage here
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...
I have done the following code in JavaScript to put focus on the particular element (branch1 is a element),
document.location.href="#branch1";
But as I am also using jQuery in my web app, so I want to do the above code in jQuery. I have tried but don't know why its not working,
$("#branch1").focus();
The above jquery (focus()) code is not working for div, whereas If i am trying the same code with textbox, then its working,
Please tell me, how can I put focus on a div elemnt using jQuery?
Thanks!
For my problem this code worked, I had to navigate to an anchor tag on page load :
$(window).scrollTop($('a#captchaAnchor').position().top);
For that matter you can use this on any element, not just an anchor tag.
Like #user293153 I only just discovered this question and it didn't seem to be answered correctly.
His answer was best. But you can also animate to the element as well.
$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
You can extend jQuery functionalities like this:
jQuery.fn.extend({
scrollToMe: function () {
var x = jQuery(this).offset().top - 100;
jQuery('html,body').animate({scrollTop: x}, 500);
}});
and then:
$('...').scrollToMe();
easy ;-)
Check jQuery.ScrollTo, I think that's the behavior that you want, check the demo.
Check out jquery-scrollintoview.
ScrollTo is fine, but oftentimes you just want to make sure a UI element is visible, not necessarily at the top. ScrollTo doesn't help you with this. From scrollintoview's README:
How does this plugin solve the user experience issue
This plugin scrolls a particular element into view similar to browser
built-in functionality (DOM's scrollIntoView() function), but works
differently (and arguably more user friendly):
it only scrolls to element when element is actually out of view; if element is in view (anywhere in visible document area), no scrolling
will be performed;
it scrolls using animation effects; when scrolling is performed users know exactly they're not redirected anywhere, but actually see
that they're simply moved somewhere else within the same page (as well
as in which direction they moved);
there's always the smallest amount of scrolling being applied; when element is above the visible document area it will be scrolled to the
top of visible area; when element is below the visible are it will be
scrolled to the bottom of visible area; this is the most consistent
way of scrolling - when scrolling would always be to top it sometimes
couldn't scroll an element to top when it was close to the bottom of
scrollable container (thus scrolling would be unpredictable);
when element's size exceeds the size of visible document area its top-left corner is the one that will be scrolled to;
Use
$(window).scrollTop()
It'll scroll the window to the item.
var scrollPos = $("#branch1").offset().top;
$(window).scrollTop(scrollPos);
If you're simply trying to scroll to the specified element, you can use the scrollIntoView method of the Element.
Here's an example :
$target.get(0).scrollIntoView();
I think you might be looking for an "anchor" given the example you have.
This link will jump to the anchor named jump
<a name="jump">This is where the link will jump to</a>
The focus jQuery method does something different from what you're trying to achieve.
For the focus() function to work on the element the div needs to have a tabindex attribute. This is probably not done by default on this type of element as it is not an input field. You can add a tabindex for example at -1 to prevent users who use tab to focus on it. If you use a positive tabindex users will be able to use tab to focus on the div element.
Here an example: http://jsfiddle.net/klodder/gFPQL/
However tabindex is not supported in Safari.
maybe you want to try this simple one
$(document).ready(function() {
$(".to-branch1").click(function() {
$('html, body').animate({
scrollTop: $("#branch1").offset().top
}, 1500);
});
});