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;}
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 debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I keep some elements inside one container. For better visibility odd elements have other background color. Sometimes I need to filter elements with conditions, so unwanted elements I move to another class, but it seems nth-child keep old state. Even if I make it dynamic with jQuery still it keeping old state.
I would prefer keep used and unused elements in same container - if I separate them and change filters, need to sort visible elements again.
jsfiddle: http://jsfiddle.net/ex4740n2/5/
Have you any ideas how to solve it?
Thanks in advance!
The answer by #Pete:
But I'm guessing your problem is that you think nth-child is a class selector - it's not, it's an element selector
So, if it not possible to make it by only css, make it using JS. Iterate visible elements and change background color.
var visibled = $(".item");
for (var i = 0; i < visibled.length; i += 2) {
$(visibled[i]).css("background-color", "rgba(190, 255, 196, 1)");
$(visibled[i + 1]).css("background-color", "");
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I mage a cog symbol that is supposed to have an onclick function that triggers a function. When I click it does not work. Could it matter that it has absolute positioning? How can I fix this?
I used this HTML:
<div id="cogdiv" onclick="theme()">
<h1 id="cog" class="themechange fa fa-cog" onclick="theme()"></h1>
</div>
and this JS:
var theme = function() {
document.getElementById('themes').style.animation = "themesappear 2s forwards";
document.getElementById('themes').style.WebkitAnimation = "themesappear 2s forwards";
};
The function works when I run it in the console.
Inspect Element here for more code.
Absolute positioning has no effect on how the onClick event is being fired.
You are simply positioning your element below another element, so another element is blocking the mouse event
Try adding to your CSS:
#cogdiv {
z-index: 9999; //or greater, or 1. Just make sure it's bigger than the overlapping element's z-index
}
Reading up on what z-index and CSS stack-order might also help.
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
I'm working on my diploma thesis, an interactive programming language which should run in browser eniroment using javascript.
In the moment I use an input line and enter event to start interaction and give feedback.
I would like to change this to have a textinput and a second field next to it where the result is shown. I use
<div id = "code" conetenteditable="true"> </div>
<div id= "result"><div>
Both are placed in a table row, so they are next to each other
how can I get result to scroll according to the actual scroll of code?
By the way I use jquery as library.
Thanks,
Rainer
In order for an element to be fixed on a page and remain there as you scroll, you must use CSS.
The code should look like:
<div id = "code" conetenteditable="true" style="position:fixed;"> </div>
<div id= "result" style="position:fixed"><div>
You can position them however you want with top, bottom, left, right.
Use css fixed position for your both dives.
like that:
#id,#result{
position: fixed;
}
I believe your problem is not with the element position but with the scroll of the text inside of the #result div.
If that's the case, you might want to use the overflow css property to have the div show an inner scrollbar.
#result {
overflow-y:auto;
max-height:100px;
}
in this example, the div will scroll if the text inside it stretches above 100px.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am using the mousenter demo from mootools. I put it on my site trying to affect the links so when someone hovers over them the link fades into another color. The problem I am having is that the mootools code is only set up to handle one ID! Since I am using it for a navigation, I have multiple IDs that I want to change. How can I affect all of them? I know I should use an array but I'm not that good with Javascript in order to code it properly. Please help!
The URL is www.portfoliobyart.com/h20
I took a look at your site. In demo.js, if you change this line
$('link').set('opacity', 0.5).addEvents({
to this:
$$('.nav a div').set('opacity', 0.5).addEvents({
you will achieve the same effect for every item in your nav menu.
You should read up on MooTools selectors for more about this. Selectors are a very powerful tool.
the code below will take each of the nav link elements and add the mouseenter and mouseout events.
//selects all nav elements
$$('.nav a div').each(function(el){
//this is the interior of the function that will run on each el
//store the original bg color
var color = el.getStyle('backgroundColor');
//now add the mouseenter and leave events w/ the morphs
el.set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 1,
'background-color': '#000000'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
hope this helps!