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.
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 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:
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
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 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
We've all seen the collapsible headers a lot now a days. I really like the effect it brings to a page, it gives a lot more dept.
I would like to achieve this dept effects, but I don't really need the functionality of a fixed header.
Now I've seen collapsible headers done, with the fixed header becoming smaller as soon as the collapsible header is off the page.
Is it possible to make the fixed header no longer fixed, the moment the collapsible header is off the page? And make it scroll off the page with the rest of the content?
I have tried it and I hope this is what you want.. Click the link below for Demo..
Demo
This is the HTML
<div id="headerSlideContainer">
<div id="headerSlideContent">
Header content goes here!
</div>
<div id="new">
Other Contents
</div>
</div>
n here goes CSS..
#headerSlideContainer {
position: absolute;
top:0px;
width: 100%;
height:1000px;
background: black;
}
#headerSlideContent {
width: 900px;
height: 50px;
margin: 0 auto;
color: white;
background:Red;
z-index:10000;
position:fixed;
}
#new{
top:60px;
z-index:2;
height:100px;
background:Orange;
position:absolute;
color: white;
}
n this is the Javascript..
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '5px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm looking for alternatives to Supersized. I'm currently using version 3.0 to show some rotating background images and found two problems on Internet Explorer.
The transicion is far from smooth, and is very slow. On Chrome and Firefox this works ok.
Some times, the background images are vertically enlarged and deformed.
Does anyone knows an alternative, or a tweak to fix those problems?.
Use any slider and float it behind the content of the page using z-index. I like Nivo Slider when I'm just sliding images, and bxSlider when I need to slide a div or ul with arbitrary content.
The element you're applying z-index to must be position: relative; or position: absolute. One thing to note about position: absolute; is that it will position the element with respect to the first parent element that is position: relative; or position: absolute. That may sound confusing, so how about an example:
Put your slider inside <body> and wrap it in a div:
<body>
<div class="container">
<!-- Your slider divs/imgs/ul -->
</div>
<div class="rest-of-page">
...
</div>
</body>
Then some css:
/* Position .container relative to body (not really needed, just an example) */
body { position: relative; }
/* Float slider behind content of page, expanding to width/height of document
* and use z-index of -1 to place it behind actual page content. */
.container {
position: absolute;
top: 0%;
left: 50%;
width: 100%;
height: 100%;
z-index: -1;
}
/* Float the actual page content above slider using z-index of 0 */
.rest-of-page { position: relative; z-index: 0; }
And that should do it. Normally you have to define a width for your slider images, but with some fiddling I think you can get it working. In my own projects I've been centering the slider to the page, not taking up the entire background, so your mileage may vary.
I'm not sure if this can give what you need. But you can take a look at SuperBGImage. Actually it's inspired by supersized but with some convenient improvements