Only my second question here (so go easy please!).
I've been trying to use jQuery waypoints to hide and show a border under my navigation based on scroll position.
For example whilst the sticky nav is over the slider image - there will be no border, however when the nav is scrolling over content, the border will appear.
Please see: http://thestylebar.co.uk (inspect element in chrome/safari)
Once the user scrolls to the waypoint the css property is changed however when the user scrolls back up the class doesn't return to its default state how can I amend this? Also, the script doesn't seem to work on the homepage?
$(function() {
$('.l-main-h').waypoint( // .l-main-h is the content area
function() {
$('.strip').css({"border-bottom":"none"});
}
)
});
http://jsfiddle.net/F5A3y/
You would have to test the direction that waypoints provides. Also, I wouldn't inline CSS like that. You should just toggle a class.
This isn't tested but it should get you close.
$('.l-main-h').waypoint(function(direction) {
$('.strip').toggleClass('bordered', direction === 'down');
});
Then your CSS would be like:
.strip.bordered {
border-bottom: 2px solid #fff;
}
Related
On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body
I've recently been using Twitter Bootstrap, and I've been loving it.
I've created a navbar that is fixed to the top, and inside it is my logo, a header, a few links, and a dropdown that says "Jump to:". Upon clicking on the dropdown, a menu comes down with four links to a section within the page. All of the links work.
My problem is that because the header of each section is now placed at the top of my page, my fixed navbar blocks it. Is there anyway I can stop this from happening? A bit of jQuery or something?
This is my website: fishyfishy2014.gweb.io. Thanks in advance.
I think you are asking about an anchor jump, which will place the matching anchor to the top of the viewport and "under" the fixed nav. I had a similar issue and used this code:
/* fixing anchor jumps */
var nav_height = 77; // pixels
$(window).bind('hashchange', function(e){
if($(location.hash).hasClass('anchor')){
scrollBy(0, nav_height);
}
return false;
});
$(document).ready(function(){
if($(location.hash).hasClass('anchor')){
$('html,body').animate({
scrollTop: $(location.hash).offset().top - nav_height - 10
}, 10 );
}
});
You just have to add the anchor CSS class to any element, you want be able to jump to.
You need to set this:
body { padding-top: 70px; }
This is coming from the Bootstrap docs itself
Body padding required The fixed navbar will overlay your other
content, unless you add padding to the top of the . Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
You can check here
The following works without any JS:
a:not([href]):before {
display: block;
content: "";
height: 60px;
margin: -60px 0 0;
}
a:not([href]) assumes that your anchors don't have a href attribute. Change both occurrences of 60px to a value of your choice.
Actually, 2ndkauboy's solution does work. In short:
get rid of the 'px' in nav_height variable (...as you said)
use the anchor css class (...as 2ndkauboy said) but DONOT use it on the <a> tag but on the <div>, as follows:
click here
... other code here ...
<div id="jump_here" class="anchor">
... content ...
</div>
Hope it helps.
In CSS, there is also the scroll-margin-top property that sets the element's scroll margin to the top side.
You need to apply to anchored element a class, for exemple .anchor
After that, you can apply this :
.anchor {
scroll-margin-top: 77px;
}
EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:
I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo
Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.
You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html
Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.
1) If you have a Google Plus account, go to your home page.
2) On the right side, there's a list of "Add to Circle" buttons that you can hover over.
3) Notice that when you hover over one of the Add to Circle dropdown (if you have enough circles to have scrolling in the dropdown) the page scrolling feature is disabled. Only scrolling vertically in the dropdown is allowed.
How is this done with javascript?
I can scroll in here (the scroll bar on the right), but can't scroll on the page body while this is dropped down.
The have an element that has a fixed height and is overflow auto, they styles the scrollbar with this trick: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
You could make it work in FF and IE to: Basically you nest a element that is overflow auto into a other and hide the scrollbar with a negative margin. Then you capture the scroll event on that same element and adapt the slider on the right side according to the scrollTop position.
Here is how i would do it: http://jsfiddle.net/kGbbP/4/
But there are many jquery plugins that can do this:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
this isn't made via JavaScript!
It's pure CSS, and works only on (non-mobile) webkit based browsers.
Here is the CSS code, just include it in a CSS file, attach it to an HTML document, and run the .html file.
Here is a demo: http://jsfiddle.net/3ZqGu/
And here is the CSS code:
::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}
I'm making a theme for wordpress. My navigation bar has rounded corners like apple's site. I want to add a hover style to it, but I can't get it to hover with rounded corners, like apple's nav bar does. I'm using a big image for the background and using wordpress 3's menu system. So, how can I hover the first and last item on the bar? Thanks for helping.
With javascript you can select and change whatever you want but if you just want to use css, you´ll have to apply the :hover to the parent of all button sub-elements so that you can select all sub-elements using css. However, that excludes older versions of IE as they don´t support :hover on elements other than a tags.
Example:
.button:hover {
//
}
.button:hover .main_section {
// change to main section of button on hover
}
.button:hover .left_part {
// change to left side on hover
}
.button:hover .right_part {
// change to right side on hover
}
You'll have to have a different background image for the "hover" style.