Develop Reference

Hi, how can I move the logo from the top left corner to the center when I start scrolling. Thanks [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to know how to move the logo from the top left corner to the center when I start scrolling. Thanks!

Have a onscroll event on the html element you want to scroll;
Inside onscroll event handling change the style of logo element to align:center;
something like below(psuedo code):
<div onscroll="handleMyScrolling(event)">
<logo id="logo"></logo>
</div>
<script>
function handleMyScrolling(event){
document.getElementById('logo').style= // your style to bring the element to
center.
}
</script>

Fit realtime text inside container [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am using Angular 2 with (for now) 2 way data binding and I need to diplay a H1 over the full width of the page. So it will become smaller the more text there will be. And bigger if the amount of text shrinks.
I saw http://fittextjs.com but that resizes it only on the page init.
I need it in realtime.
Thanks!

I am using this
https://github.com/jquery-textfill/jquery-textfill
And you can call them when you want (after text render), simply, calling
$('#my-element').textfill({
maxFontPixels: 36
});
And it's very customizable.
Happy coding!

Edit:
I understand the problem now replace px with whatever unit of length
<h1 ng-style="{'max-width':'100%', 'font-size': inputlength + 'px'}">{{input}}</h1>
You may have to tweak it to however you want to get it to work
essentially having to do the logic like font-size:calc(100% + 2vw)
or work it out in your controller
$scope.input = "ssssssss";
$scope.inputlength = 10;
$scope.$watch('input', function(){
$scope.inputlength = window.innerWidth / $scope.input.length;
});

Replace all #333 colors with javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My question is how do I replace a certain color in javascript? I have a few SVG fills which I need to change in color but how exactly do I get all #333 colors that exist in my document?

I would try something with jquery (going to be a good bit simpler than anything with pure js)
$(this).html().replace("#333","#f2f2f2")

Here is something you could do. This example would return all elements with that color.
var results = $('*').filter(function() {
return $(this).css('color') == 'rgb(255, 0, 0)';
})
http://jsfiddle.net/g5yp1g7y/
You will notice I didn't use hex. The problem with selecting by hex is most browsers will convert the color style to rgb when you call them via JS.

jQuery, resize then fadeIn [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I search around but don't know how to do this one... I receive through $.ajax() data then render through jQuery template. I want:
create template object (this one done)
set it hide() (this one done)
insert it to page with height 1 or 0
then make some effect that will re-size (by height) this inserted div
make fadeIn on this template
So base thing that i need to re-size (slowly) page, add there hidden div (rendered by template) and then make fadeIn function on it. The same thing on fadeOut.

You'll need to use callback functions like this -
$( "#something" ).animate({
height: "100",
width : "100"
}, 5000, function() {
$('#someOtherThing').fadeIn();
});

Color Contrast Customization in Web Design [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How do I do the color color customization in HTML5? Examples can be found at http://perkins.org/ whereby they have a color contrast option on the top of their page.
Thank you!

Um, mark all the elements you want to change as class "contrast" and then change the color and the background color:
var elements = document.getElementsByClassName('contrast');
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = newcolor;
elements[i].style.background = newbackground;
}