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 6 years ago.
Improve this question
I have a full-page header with a logo in the center and an arrow below. I need the arrow to disappear if it scrolls up by 10px or more. To this end, I am using .scrollTop() and .hide() as shown in the following jfiddle. However it does not disappear on scrolling up.
Would appreciate anyone putting me on the right path to find why the arrow isn't hiding with .hide()?
First of all include jquery in your jfiddle (settings icon in the js part of the screen). And use the $j also by $j('#arr_down').hide(); and $j('#arr_down').hide(); you forgot the j in your example
$j=jQuery.noConflict();
$j(document).ready(function() {
$j(window).scroll(function () {
if ($j(this).scrollTop() > 10)
$j('#arr_down').hide();
else
$j('#arr_down').show();
});
});
Related
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'm using this iteration in JavaScript to generate some >li< tags.
for ( var i = 0, l = response.items.length; i < l; i++ )
{
//alert(response.items[i].id.videoId);
document.getElementById("thumbs").innerHTML += "<li class='item-thumbs span3 hardstyle'>Shortened for this question</li>";
}
As you can see in the picture below, the >li< tags are being generated but the screen stays "white".
Can anyone tell me why this is happening? This script is sitting at the bottom of the code, maybe that's why I can't see any elements, because the rest of the page is being generated before I iterate through this object?
Thank you in advance,
Stephan
you should try to remove
height:0px;
overflow:hidden;
css values from #thumbs element (at least second one!)
#thumbs {height:0px; overflow:hidden;}
compare here: https://jsfiddle.net/vtrpyqdL/ (try to run this one then remove css section)
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 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 8 years ago.
Improve this question
I need some help with a design for a web application I want to create. Basically I want to start with a black background..let's say 1000px X 1000px. Then on an event..lets say a click event, I want to be able to add a small image of a star on top of that background at the coordinates of my choice. And keep doing that until I have a bunch of stars on the black background.
I don't know how to set up my html to be able to do this. Once I have the overall design I can take it from there, I just don't know where to start.
Languages: HTML, Javascript, CSS
Starting Image:
Image to Add:
Ending Image:
http://jsfiddle.net/mpprq3r3/
Heres a very simple example. Look at how its done and change it to fit your needs.
$(".canvas").on("click", function(e) {
var parentOffset = $(this).parent().offset();
var relX = e.originalEvent.pageX - parentOffset.left;
var relY = e.originalEvent.pageY - parentOffset.top;
console.log(relX)
$(this).append("<div class='item' style='top:"+(relY-5)+"px;left:"+(relX-5)+"px'><img src='http://i.stack.imgur.com/4Crjc.png' /></div>");
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a div which represents a navbar on the page. Before it are other elements like logos, banners and etc...
I want to do navbar sticky only when it's is scrolled down, i.e. when i scroll down and left it behind i need to add class to it. How can i catch this moment?
There should be something like this:
jQuery(document).scroll(function(){
// if jQuery('#navbar') is already scrolled down add to it .navbar-fixed else remove
});
You can get the position of the scrollbar with jQueryElement.scrollTop(). You can get the offset from the 'navbar' with jQueryElement.offset().top.. You can use this to calculate if the user scrolled past the navbar:
$(document).scroll(function(){
if( $(document).scrollTop() > $('#navbar').offset().top ) {
$('#navbar').addClass('navbar-fixed');
} else {
$('#navbar').removeClass('navbar-fixed');
}
});