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();
});
Related
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 1 year ago.
Improve this question
If I click on the image, it is supposed to move me to another part of the scroll. Problem is, the image is included in a header (like a banner) which initiated as a class. How could i implement js code inside an image that belongs to that class? Or should i create a class inside a class?
First of all you don't need to use javascript at all
You can place your img inside a tag with href="#id-of-element". In in some other place in your html you can place element with id="id-of-element". In that case when you click on img it will scroll you to this element (it will not be a smooth scroll but more like 'teleportation').
If you insist on smooth scroll then you can do it like that. This will cover all anchors like a href="#..." but if you want it to only work on this very image you can replace a[href^="#"] with classname/id of your image.
This example for some reason doesn't work here for some reason but work locally, so you have to check this yourself https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
document.querySelector('a[href^="#"]').addEventListener('click', (e) => {
e.preventDefault();
const id = e.target.getAttribute('href');
document.querySelector(id).scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
});
<a href="#id-of-element">
this is image
</a>
<div style="height: 1000px"></div>
<div id="id-of-element">content</div>
You can try using document.querySelector(selector)
selector example - .header .banner img
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 4 years ago.
Improve this question
Is there a way do redesign the jQuery UI slider range,
so that the button stays in the slider div and does not overlap over like in
the screenshots below ?
For the left end, you can just modify the css for ".ui-slider-horizontal .ui-slider-handle", and remove "margin-left: -.6em;"
The right end will require modifications to the javasript, the ui/widgets/slider.js
file. On the latest code on github (https://github.com/jquery/jquery-ui/blob/master/ui/widgets/slider.js), this is on line 602
valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100;
The "valPercent" would be a variable from 0-100, this is used as the percentage from the left. You need to decrease this by the proportion of the handler to the entire slider. i.e.
valPercent *= (sliderWidth - handlerWidth)/sliderWidth
Replacing them with the actual values (we use that for the slider and this for the handle because we are in a loop going through the handles) you would get:
valPercent *= (that.elementSize.width- $(this).width())/that.elementSize.width
Putting this after line 603 would make this work for sliders with multiple handles. For single handles you would do the same for line 645, with the following code:
valPercent *= (this.elementSize.width- $(this.handle).width())/this.elementSize.width
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 6 years ago.
Improve this question
In this website, the header is animated when you scroll the page a bit. Can you please advise what techniques, tools and best practices (broadly) one may use to achieve this and similar effects?
Use javascript to add a class to the header element when the scroll position is at the top (bind to the onscroll event and check if at the top or not).
Then define new postiions for your elements in css when that class is applied, and use the transition css property to animate it
Well for the animation occurring when you scroll you would use
$(document).scroll(function() {
if($(document).scrollTop() === 0);
} else {
});
As for the animation, there are many ways to do this and the question is too broad, as stated above.
the way I personally do it, is to add a class to the body on scroll. I then style the particular element I want to change (in your case the header) accordingly. I add it to the body instead of the particular element in case I want to manipulate other selectors, etc.
This is the JS I use:
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 50) { //distance scrolled before effect takes place
jQuery("body").addClass("scrolled");
} else {
jQuery("body").removeClass("scrolled");
}
});
Then I'd add some CSS for example:
header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;}
body.scrolled header{height:50px;}
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;
});
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 to change the "start" of image?
I mean that the img is in the immobility only it's beginning is moving
I want change it CSS or HTML, in the last resort in JavaScript
Something like this: FIRST PICTURE (This picture on click change it's beginnig).
... It transform to it: SECOND PICTURE
Any idea? :/
<div class="myImg"> </div>
<style>
.myImg{
background: url('myimg.jpg');
}
.myImg2{
background: url('myotherimg.jpg');
}
</style>
<script type="javascript/text">
$('.myImg').click(function() {
$(this).removeClass('myImg');
$(this).addClass('myImg2');
});
</script>
Ofcourse you'll have to use jquery link to get jQuery latest update.
So what have i actually done here?
I've used jQuery to check if user click div .myImg if he did i just switch bettwen the div's classes and each other class got different image.
Hope i helped.
I'm not entirely sure what you're asking, but it sounds like you might want to do CSS sprites.
http://css-tricks.com/css-sprites/
If you want to change the image on click, you'll need some code. I won't spend too much time on that, given your question is hard to decipher, but if it were me, I would create a class per sprite, then toggle between the two classes based on the click event.