Develop Reference

Changing background body image hovering a list with jQuery with fadeIn and fadeOut effects + zoom

Long title, I know. It pretty much explains what I'm trying to accomplish.
My HTML looks like this:
<ul>
<li class="bg-0">
<h2>New Bikes</h2>
<span class="bg-0">http://localhost/sublime/wp-content/uploads/2016/10/new.jpg</span>
</li>
<li class="bg-1">
<h2>Smart Control</h2>
<span class="bg-1">http://localhost/sublime/wp-content/uploads/2016/10/smart.png</span>
</li>
<li class="bg-2">
<h2>Laura</h2>
<span class="bg-2">http://localhost/sublime/wp-content/uploads/2016/10/laura.jpg</span>
</li>
</ul>
It's not the tidiest,but I'm generating it with Wordpress and I don't know any better (still learning my way through PHP too).
And, what I want is, when the user hovers on a list item the body image changes using the image url of that span within the list item. And on mouse out it reverts to the original color. I can do that using this code (again, I'm sure it's very ugly and dirty):
$('.our-work li').hover(
function(e){
//mouseenter
var theClass = $(this).attr('class');
var theImage = $(this).find('span').text();
$('body.page-template-ourwork-page').css({'backgroundImage' : 'url(' + theImage + ')'});
console.log($('body').css('background'));
},
function(e){
//mouseleave
var theClass = $(this).attr('class');
var theImage = $(this).find('span').text();
$('body.page-template-ourwork-page').css({'backgroundImage' : 'url()'});
}
);
But what I can't seem to accomplish is a "soft" change with a fadeIn and fadeOut effect. More importantly, I'd like that while the mouse is still on a list item, the background images slowly zooms in (gets "bigger") until a certain point of course and then stops.
I've tried the fadeIn and fadeOut functions but they seem to now work properly so I'm sure it's something I'm doing wrong.
Sorry for the long post and thank you.

need add index to CSS and put the higher number to the layer you need keep on/over the other.
<ul class="slide"></ul>
css
.slide{
z-index: -1;/*Use it according to your needs.*/
}
for your Jquery need zoom:
$('img').load(function() {
$(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
$(this).stop().animate({
height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
});
});
It is not exactly the answer is just one example will have to adapt to your needs.

How can I automatically add a class to a link based on active anchor?

I have a sidebar on the left, like:
<ul>
<li>Anchor 1</li>
<li>Anchor 2</li>
....
</ul>
And content on the right, like this:
<h1 class="anchor-elem" id="anchor1">Anchor 1</h1>
<h1 class="anchor-elem" id="anchor2">Anchor 2</h1>
Clicking on the sidebar links jumps to the anchor... no problem there. What I'm trying to achieve is to trap these anchors when they enter into the top scroll position, so that I can add a class to the appropriate LI element. I want to do this automatically, without having to specify each element.
For example, I found an answer to a question similar:
$(document).ready(function(){
var section1Height = $('#section1').height();
var section2Height = $('#section2').height();
var section3Height = $('#section3').height();
$(window).scroll(function() {
var winTop = $(window).scrollTop();
if(winTop >= section1Height && winTop <= section2Height){
$('#section1').addClass("newClass").not().removeClass("newClass");
} else if(winTop >= section2Height && winTop <= section3Height){
$('#section2').addClass("newClass").not().removeClass("newClass");
} else if(winTop >= section3Height){
$('#section3').addClass("newClass").not().removeClass("newClass");
}
});
});
Pseudo Logic of what I want to achieve
$(window).scroll(function() {
if .anchor-elem is in view ->
find it's relative link on the menu and add class "active" to it
});
A similar example would be the bootstrap docs: http://bootstrapdocs.com/v3.1.1/docs/getting-started/
I looked at their affix code but was quite confusing as it's interwoven with a ton of other functions.
Is there a simple way to achieve this? Without using bootstrap.js

Assuming you're already using jQuery, you could get the .offset() of each element and check to see if the window top is below that .offset(). DO NOT get the offset() on each scroll as it is a very expensive operation. I would recommend doing it on page load, if possible, saving the values to an array, and then checking the array. If you think the users will resize the window, which would affect the offsets, do it on load and on resize. Here's an example: http://jsfiddle.net/qars0w0o/3/

how to get an image to move position along top of a div when link is clicked

I am new to all of this, and I am trying to get the image movement effect like this site has:http://www.heroku.com/. How do I get the image to move along the div when the navigational link is clicked?

Are you referring to the origami stage images on the main page with the arrow highlight that moves along while clicking the cranes? On this very page they are using jQuery animate method, you can see the whole code in home.js file.
If you want to try and do something like that I would go for something similar, like (using jQuery):
$(function () {
var slider = $('#slider'),
first = $('.list-item').first(),
margin = (first.outerWidth() - first.innerWidth()) / 2,
// compute the offset for the slider
// you will have to tailor those to your specific implementation
offset = (slider.outerWidth() / 2) +
((first.outerWidth() - slider.outerWidth()) / 2);
// attach click event to the menu elements
$('.list-item').on('click', function () {
var self = $(this),
siblings = self.siblings(),
x;
// if not active, move the slider accordingly
if (!self.hasClass('active')) {
siblings.removeClass('active');
self.addClass('active');
x = offset + margin + self.position().left;
// the magic happens here :)
slider.animate({
left: x
}, 500);
}
});
// trigger the click event for the first list element
first.trigger('click');
});
Of course earlier you have to prepare your HTML elements properly, add some styling, and play with the margins, outer/inner widths etc.
You can find my 5 minutes tutorial/example here:
http://jsfiddle.net/krwck/bjVdN/10/

probably the best choice for that will be JQuery. you can define
<a class='menu'>Option 1</a>
<a class='menu'>Option 2</a>
<a class='menu'>Option 3</a>
<div id='moveable'></div>
than you use JQuery like this :
$(".menu").click(function(){
$("#moveable").animate({
right: '+=150',
}, 500, function() {
// Animation complete.
});
});
You will need some CSS styling too. Hope this helps a bit.
This link may help as well : http://api.jquery.com/animate/

Scroll a div vertically to a desired position using jQuery

This is a followup question for this:
Scrollpane on the bottom, css is hacky, javascript is hard
I ended up doing the scrolling in the same way explained in the accepted answer.
Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!
I want to make a javascript call like this
function scrollTo(id) {
$('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}
But this is not in jQuery (or at least I don't know of it). So is there a way to make it?
I'll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/
Help me write that scrollTo function!
A .animate would be fine too.
UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)

It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:
yourElement.scrollIntoView();

Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).
If you want the element to be centered, use - Math.round(middle.width()/100)*50.
Fiddle: http://jsfiddle.net/U6QdQ/17/
//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
$.fn.magicScrollTo = function(){
var middle = $("#middle");
var currentScrollLeft = middle.scrollLeft();
var width = middle.width();
var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
newScrollLeft = newScrollLeft - width + this.outerWidth();
}
middle.animate({
scrollLeft: newScrollLeft,
}, 'fast')
}
})(jQuery);
Usage:
//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();

Something along these lines would be a good start:
http://jsfiddle.net/vHjJ4/
This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).

I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:
//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position();
if (pos){
$("#middle").scrollLeft(pos.left);
}
From here, you can use the width of middle to center the item if needed.

Google plus popup box when hovering over thumbnail?

I'm trying to figure out how to create a popup box with user profile details on mouseover like you see on google plus. When hovering over a thumbnail a popup appears with the option to add that person into your circle.
It seems kinda simple to do with jQuery but I've been unable to find a simple solution. Most of the plugins I've come across are too complicated and require a lot of tweaking. Any help on how to do this would be greatly appreciated!
Hover Effect Screenshot

You'll want to try something like this. It doesn't handle all the cases you'll need (you need the hover to stay active when user enters the popup); but you can work some of those out I hope.
Here's the basic jQuery code:
jQuery(function($) {
function getMyContent($img) {
// do your fancy ajax calls or append your control links and such here
return $('<p />').append($img.clone()).append('Here is my fancy hoverbox');
}
$('#content img').mouseenter(function(e) {
var $this = $(this), off = $this.offset();
var pos = {
// or you could position it relative to the mouse
top: (e.clientY + 2) + 'px',
left: (e.clientX + 2) + 'px'
};
$('#hoverbox').css(pos)
.append(getMyContent($this))
.fadeTo('slow', .95);
}).mouseleave(function(e) {
$('#hoverbox').fadeOut('slow', function() { $(this).html(''); });
});
});
UPDATE: Here is one that handles the hover events on the popup for you (yeah, I'm still messing around with it; why?)

The simplest solution would be to add a hidden div to the element that wraps around your profile photo.
<div class="profile-popup" style="display: none;">
<!-- Popup info goes here -->
</div>
Go ahead and style the div with CSS however you want it to appear, say with absolute positioning at the bottom right corner for the "pop out" effect. Then register a mouseOver event in jQuery that shows the div:
$().ready( function() {
$('.profile-pic-wrapper').mouseenter( function() {
$('.profile-popup', this).show( //pass in some animation options here );
});
$('.profile-pic-wrapper').mouseleave( function() {
$('.profile-popup', this).hide( //pass in some animation options here );
});
});
This is just a basic idea (and that code may need to be tweaked a bit). You'll have to add some additional logic to keep the popup open when the user mouses into it, but this should get you started.
The more elegant solution would be to pass JSON data to your jQuery script and have it generate the popup div dynamically on hover, but that is a bit more advanced.