Waypoints and toggling classes - javascript

I am unable to get Waypoints working with my tabbed sidebar. When the bottom of the #four element is in view the .active class should activate for the #details element, but for some reason it does not. My code looks like this
$('#four').waypoint(function() {
$('#details').toggleClass('active');
}, {
offset: 'bottom-in-view'
});
Example with issue: http://codepen.io/bbbenji/pen/Nqrwqv
(Waypoints and Font-Awesome are both called in the setting.)

Jquery must be called before Waypoints. Rookie mistake.

Related

JQuery - Hide and Show - Not Functioning

I am trying to use the JQuery Hide and show script to display text on top an image when the div tag is clicked.
The JQuery code I am using is bellow, I have created a JSFiddle to show 2 examples, a before and after with my current result.
UPDATE: I have managed to get the toggle to work and changed some of the CSS. But need div tag hidden until click.
Any help or feedback would be great thanks (Y)
Im sorry about the prev link;
$(".card-options").click(function () {
$(".card-list").toggle();
});
[JSfiddle][1]
[1] http://jsfiddle.net/jinghming/u4epkev4/
Instead Of using
$("#div").click(function(){
$(".box").hide();
});
$("#div").click(function(){
$(".box").show();
});
I used toggle function;
$("#div").click(function () {
$(".box").toggle();
});
*Still working out how to have .box hidden until #div is clicked. But currently does switch between hide and show.
From what I understand, when the little black box is clicked, the list should appear and disappear - I can't see the link to your updated fiddle so here is the update I made to your JS:
$(".card .card-options").click(function () {
$(this).parents('.card').find('.card-list').toggleClass('active');
});
I've also added a display: none; to your .card-list CSS declaration and added the following:
.card-list.active {display: block;}
If you want that bottom bar to be at the bottom of the box then you'd have to do some absolute positioning.
See the updated fiddle here:
http://jsfiddle.net/u4epkev4/4/
You just need to do toggle and you forgot to go into card-text:
$(".card-list").hide(); // Hides the card list at the start
$(".card .card-text .card-options").click(function () {
// Toggle the card-list for the clicked card
$(this).parent().parent().find(".card-list").toggle();
});
Example

Javascript Scroll by one pixel on load of a div

I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}

jquery .hover() confusion

I am currently programming my portfolio page and I came across a strange behaviour off hover states that I don't understand.
I have some links in a navigation bar at the top of my page. The links are fully defined with :hover and everything. Now I also want the colour of the links to change when I hover the mouse over the different sections of the site that the links refer to.
So I wrote this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('#portLink').css('color','#FF9900');
}, function() {
$('#portLink').css('color','inherit');
});
$('#about').hover(function() {
$('#aboLink').css('color','#FF9900');
}, function() {
$('#aboLink').css('color','inherit');
});
...
At first it seems to work, but when you scroll to the blog and then move the mouse over the navigation the css :hover doesn’t seem to work anymore. This is my test site:
http://www.henning-marxen.de/test/index.html (Don't laugh those are placeholders^^)
Do you know why it behaves like this? I am very confused. Thank you very much in advance.
You should use CSS for this, not jQuery:
#portLink:hover, #about:hover { color: #FF9900; }
Or (to more explicitly match your JS):
#portfolio:hover #portLink, #about:hover #aboLink { color: #FF9900; }
If your link elements are not descendent of those first selectors, use + to group them (as indicated in this fiddle): http://jsfiddle.net/B8Xuw/ *note this assumes they are siblings rather than parent>child
#portfolio:hover + #portLink, #about:hover + #aboLink { color: #FF9900; }
You need a mix of js and css for this. In your css you need to apply your styles with the hover state but also with a class which I'll call current for this example.
.nav-link:hover,
.nav-link.current{
color:#FF9900;
}
Then all you javascript needs to do is add or remove the class depending on which part of the site you have scrolled to:
var navLinks = $('.nav-link');
//each time the user scrolls, reset all links by removing class.
navLinks.removeClass('current');
//Then find the link that needs highlighting and add the class to it.
//There obviously needs to be some logic here to filter the correct link.
navLinks.filter('[href="#portfolio"]').addClass('current');
Try this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('[href="#portfolio"]').css('color','#FF9900');
}, function() {
$('[href="#portfolio"]').css('color','inherit');
});
$('#about').hover(function() {
$('[href="#about"]').css('color','#FF9900');
}, function() {
$('[href="#about"]').css('color','inherit');
});

Adding a delay to submenu dropdown - bootstrap3

I can add a delay to the normal bootstrap3 dropdown menu, but in this instance I only want the delay on the submenu I've created (which isn't out the bootstrap box) - however the jquery used should still work. I need the delay so users can move the cursor to it easily without it closing (because the cursor may drift outside the a:hover element).
Take a look at this bootply - http://bootply.com/101522 and please help or advise why this isnt working!
jQuery('li.dropdown-submenu').hover(function () {
jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
You need to remove (from your CSS):
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
This is causing it to show up instantly. I tried it in your bootply and it works perfectly.
Good Luck!

How can I ensure that my Submenu does not disappear when I hover out or add a delay before it disappears

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.
The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.
Here is the code and example try it out, any solutions is appreciated!
http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu
Thanks in advance!
Example: http://jsfiddle.net/nPdNd/40/
Using jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
Changed CSS
ul#nav li:hover > ul { to ul#nav li.current > ul {
ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {
EDIT: I changed the selector due to a bug to .test and added class test to the <li>
EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.
Multiple solutions exist to address your problem:
Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):
http://www.w3schools.com/css3/css3_transitions.asp
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/
If you have jQuery, you can use .animate() to do
the same thing:
http://api.jquery.com/animate/
Take a look at .stop() too:
http://api.jquery.com/stop/
If all else fails, you can try playing around with setTimeout();
https://developer.mozilla.org/en/DOM/window.setTimeout
http://www.w3schools.com/js/js_timing.asp
this is ONLY an example - http://jsfiddle.net/nPdNd/22/
i would suggest you experiment yourself, until you get a desired result
this example is based on mouseenter/mouseleave events:
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
it is also uses JQuery UI
Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/
Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.
Please add this script in you page , This is easy way
Step 1-
Add comon jquery in you page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 1-
Add this script in your page -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
I do have little changes in your css
Demo http://jsfiddle.net/nPdNd/28/
your code (li:hover)not work ie6 , did u check it ?
Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....
CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.
https://developer.mozilla.org/en/CSS/transition-delay
Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.

Categories

Resources