We Keep Coding

Postioning of a clickable dropdown menu [closed]

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 5 years ago.
Improve this question
I'm using a mobile first approach to create a responsive website. I'm currently working on my navigation menu and I'm satisfied with it on mobile (though it's far from perfect). However, when styling my navigation menu for web use I'm not able to position my dropdown content below the element in my menu. It's currently popping up in the upper left corner.
I'm using jQuery to create my clickable menu (don't know if that's relevant).
I also experience a bug on mobile where i cannot close the dropdown after opening it again. If anyone has an answer for that too, that would be great but I'm satisfied with it for now.
Any help is greatly appreciated, thank you :)

Not a perfect example, but you are best off removing your use of floating and replacing with a display led approach.
Something along these lines:
#media only screen and (min-width: 900px) {
nav > a, .dropNav, nav > div {
display: inline;
position: relative;
}
.dropList {
left: 0;
right: 0;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding-left: 0;
}
}
Example: https://jsfiddle.net/davcpas123/mjukghz6/1/
This will achieve something similar to this:

Fade in when scrolling certain amount [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 6 years ago.
Improve this question
I want to have a div that fades in when you have scrolled a certain amount of pixels, without using jquery, only using javascript.

Jquery is Javascript, so unless you loop a listener (for scroll) in JS to change something in the document object model, you will find yourself having to use HTML5 (css3 and some jquery), like this (From Codepen)
HTML
<div class="top"><div class="title">Fade Away</div></div>
CSS
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
JS
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
There are several pre-written parallax scripts you can use, like this one called skrollr, which will enable you to just add a reference to the JS file and then add CSS to your page code: https://prinzhorn.github.io/skrollr/
I hope that helps you get started!

To get the scroll position from top, you can use the document.pageYOffset property.
To fade something in, you have to use a setInterval, you can see it here:
How to do fade-in and fade-out with JavaScript and CSS

Whitespace at the bottom of DIV [closed]

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 creating a "sketchpad" mini-project. Most features are working so far, but I'm having one issue. The sketchpad uses a 16x16 grid by default. When I fill in the bottom row of the grid, you can still see a tiny white line. I have no idea where it could be coming from.
This is an image of the issue I mentioned above
Here is the code: JSFIDDLE
#grid {
height: 450px;
width: 450px;
margin: 10px auto;
background-color: #fff;
display: block;
overflow: hidden;
font-size: 0;
}

Width scrolling remove [closed]

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 don't want a width-scrolling bar on my website and wanted to know if you know whats causing it and how to fix it(code).
I already tried this:
html, body {
max-width: 100%;
overflow-x: hidden;
}

Your div row bg-about have css margin-right: -15px just wrap the row bg-about in another div .container-fluid and everthing will works fine.
Tip.
You shoul always wrap row inside container, container-fluid or col-*-*

The reason is this rule in your CSS:
.row {
margin-right: -15px;
margin-left: -15px;
}
It adds 30px the 100% width of .row
remove it...

Your div with class row bg-about has a margin-right of -15px which causes your page to be larger than 100%.
Just remove the row class from this div and the problem should disappear.

If mouse reaches far left of screen perform an action [closed]

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
Hi im looking for a way so that if my mouse moves to the far left or right of the screen an action will be performed is there a way to do this with html css jquery etc? Like im trying to get my navbar to show when my mouse is reaches the left end of the screen. any help would be much appreciated

See here http://api.jquery.com/mousemove/
Based on the examples, you can then use pageX and pageY to determine position of the mouse. You could probably have something like this:
$("body").on("mousemove",function(event) {
if (event.pageX < 50) {
// do something
}
});

No need to make it overly complicated. Just position your menu as a transparent layer, key hover to expand and show the menu links.
#menu { overflow: hidden;
background-color: transparent;
width: 20px;
height: 100%;
position: absolute; top: 0px; left: 0px; }
#menu:hover { width: auto; background-color: red; height: 100% }
.link { margin-left: 20px; display: block; }
<div id="menu">
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
</div>
Here is a fiddle showing how it will work. http://jsfiddle.net/6cgZZ/
If you want to lock the menu in place, then you will probably want to use JS to trigger a mouseover event, but I would still use a transparent element to use as a trigger. In that case, using DOM you can dynamicly alter the menu's properties, like visibility, width, etc.