I have some jquery ui sliders you can see here
When you click the slider bar, the tic jumps to that part of the bar. This is great however the bar is very thin and easy to miss when you try to click it. I don't want to change the appearance but I am wondering if there is a way to make the click radius a little padded so if you click a few pixels above or below the bar it still counts as clicking the bar.
It's a pretty hackish solution, but I believe this will work. What you need to do is to inject an additional transparent element into each slider that has a height larger than it's parent's. The code looks something like this:
$('<div></div>').appendTo('.ui-slider').css({
'height': '20px',
'position': 'absolute',
'top': '-8px',
'width': '100%'
});
Of course it would be better if you give them a class and apply the CSS in the stylesheet instead. In addition to that, I would suggest adding in cursor: pointer to make it clear which areas are clickable.
Related
I'm having problems changing the background color of an element (".background") using Scrollmagic. I've successfully changed other elements background colors, but this specific one has defeated me. Here is the scenario:
When a user scrolls down to or clicks on the "Studios" navigation link some of the elements will change background colors (most of them work already). I'm specifically trying to change the background color of the "tooltips." These are the boxes that appear if you hover over the navigation dots on the left (there are 5 currently) or top (currently 2 on the Studios section). Each of these tooltips has the "background" class.
When you first load the page and hover over the top dot on the left you should see "Expedition" pop up in a purple box. When you scroll down to Studios it should change this box and others like it to a red box. It doesn't.
Here is a link and relevant code.
Link to live example
Warning This is a work in progress. Ignore the fact that a lot of other things don't work. This definitely won't work on mobile or small-width devices.
//Studios
var redBG = '#7d1217';
var redLight = '#7d3537';
var redNav = '#fc1925';
function tooltipStudios() {
jQuery(".backdrop").css({"backgroundColor" : redBG})
}
//Create Studios Timeline
var studiosColor = new TimelineMax()
.to('#site-header-menu', 0.3, {backgroundColor: redLight})
.to('#wpfp-navmenu', 0.15, {backgroundColor: redBG})
.to('#fp-nav ul li a span', 0.3, {backgroundColor: redNav})
.to('#secnav-studios span', 0.15, {backgroundColor: redLight})
.to('.dropdown-content li', 0.05, {backgroundColor: redBG})
.to('#colophon', 0.3, {backgroundColor: redBG})
.to('.background', 0.15, {backgroundColor: redBG});
// Studio Scene
var studiosScene = new ScrollMagic.Scene({
triggerElement: '#slide-studios',
offset: 200
})
.setTween(studiosColor)
.addTo(controller);
I've been trying to narrow down what is preventing it from triggering and so far here is what I can think of:
The Fullpage plugin has a default setting for color (right now it is the purple) and is preventing any changes somehow. The css it includes is a style tag with ID "wpfp-dynamic-css"
.to() isn't the right action to use in the tween. This is my first time using Scrollmagic so I'm learning as I go.
I wanted to see if there were other ways to change the tooltip color successfully and I was able to. You'll notice in the code block i included i have a function called tooltipStudios(). If I use this function as a call() in the tween it will successfully change the color (you can see an example if you go down to the Agency section. It will change the tooltip bg to #000000). However, the color won't change back if you scroll back up to any section like the colors of other elements do when I use .to().
I'm completely stumped at this point. Here is a quick list of some of the relevant plugins/scripts that you may need:
Wordpress (up to date at the time of writing)
WP Fullpage plugin (incorporates fullpage.js)
Scrollmagic (up to date at the time of writing)
Please feel free to ask for any other information/code and I'll supply it.
Thanks in advance to anyone willing to tackle this!
If you read fullPage.js FAQs you'll find the answer in this questions:
jQuery scrollTop function doesn't work
jQuery scroll event doesn't work
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.
Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
I really like the way the DIVs fold/unfold from the top to the bottom then left to right when users click on the menu items (about, services, my tools, etc) on this website. Seems that it has been developed by a very talented person.
Any idea how to achieve something like that? I was expecting this to be done via complex CSS animation, but looking at the CSS sheet that doesn't seem to be the case.
Many thank
On that site it is achieved with the use of jQuery UI - more specifically with the Fold Effect.
I think using jQuery UI for this task alone would be an overkill, in fact you don't even need jQuery here, but I think you want to stick to it, since it's relatively easy both to read and to write code:
$("a").click(function() {
$("#fold")
.animate({ width: "500px" }, 1000 )
.animate({ height: "500px" }, 1000 )
});
See:
http://jsfiddle.net/bartkarp/u3qtt6fo/
http://api.jquery.com/animate/
If you don't want to use jQuery UI, I guess you could do it by animating the css...:-??
First state is height: 0; and width :30px; ...then using the animate on click event you could give the height a value and animation time, the width a delay equal o bigger than the height animation time and then it's value...that should do the trick but it's more stiff than actually using the UI
I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns
Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.
I would like to make the DIV that appears on hover transparent so the image below it shows through slightly, but instead it is only getting lighter. I have another page with similar functionality, where the DIV slides in horizontally instead of from the bottom; this page has successful transparency. For some reason, the code is not translating.
Here's what I have so far: http://jsfiddle.net/tGEZb/
I've tried rgba instead of the code I have here with no luck, and also searched through the posts here but can't find anything that addresses this exact issue..not sure what else to try. I'm sure it's something obvious that is hiding from me from staring at the code for too long but hopefully someone can help.
I would like to avoid using CSS3 if possible and also maintain the smooth functionality of the slider now (rather than having something that toggles).
Disclaimer: I copied and pasted the JavaScript from a post I found online - unfortunately that is the extent of my JS abilities.
Thanks in advance for any help.
You're hiding the image by setting its parent's height to 0. There is nothing for the div to see-through to, so the white background make's it lighter.
Try moving the bottom div instead. http://jsfiddle.net/tGEZb/6/
$(document).ready(function(){
$('.espot-up-down').mouseover(function(){
$('.espot-slide-onhover').stop().animate({
top: -230
}, 150);
}).mouseout(function(){
$('.espot-slide-onhover').stop().animate({
top: 0
}, 250)
})
});
.espot-up-down needs position: relative;
I'm trying to fade all elements on a webpage except for one div. I've been able to fade all the elements with the following jQuery:
$('*').css('opacity', .3);
However, it seems as if opacity is a property that inherits from parent elements, even if I explicitly set the opacity of the div to 1. I'm drawing a blank as to any solutions right now, so can I have some help here?
If what you want is to make this particular div stand out visually, you might consider an approach like the one that is used for modal windows/lightboxes. Position the div absolutely with a high z-index, and then stack another div in between the highlighted one and the rest of the content with a dark background color and medium opacity. That will in effect "dim" the rest of the page while still keeping the highlighted div with its normal apperance.
As Jimmy Cuadra suggested, you could change the position of the div then add an overlay under it... This is similar to what jQuery Tools Expose does.
You don't really need a plugin to do this though, I answered another question with a similar approach. This script will remove the overlay if you click anywhere outside of the highlighted div. Note this requires you to use jQuery version 1.4+
// Relatively position the div to highlight
$('#myDiv').css({
position: 'relative',
top : 0,
left : 0,
zIndex : 100
});
// Add overlay and make clickable
var w = $(window).width();
var h = $(window).height();
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
// Click overlay to remove
$('#overlay').click(function(){
$(this).remove();
})
Maybe instead of doing the * selector you can make it more targeted to divs or whatnot and then use the not selector to ignore the one you want to stay normal?
There's also this article on CSS Opacity that doesn't affect children that might be useful.
Opacity is indeed inherited. If you think about it, it doesn't make a lot of sense for a transparent div to contain a non-transparent div anyway.
What you probably wish to do instead is set the background color of a div to transparent. To do this, you need to use rgba colors but keep in mind this is supported in less browsers.
You can read a comparison of the two including their effects and implementations, here.
More information would be helpful. If the div in question is sufficiently separated from the rest of the content such that, occasionally, you wish to display it in isolation of everything else, you may wish to consider restructuring the page so that it is not contained in the parent div.
A cool technique consists of applying a large outline to the div. It works with a large box-shadow as well. The differences are detailed here.
Define a CSS class, like highlight, with that property:
.highlight {
outline: 9999px solid rgba(0,0,0,0.5);
}
In Javascript, you can just apply that class to your div:
$('#mydiv').addClass('highlight');