This is the page I'm trying to do: Gallery
And what I'm trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.
I tried following the instructions here but for the second image the title didn't swap and it only showed the first one.
Also I'm a little bit confused where to add the fadein fadeout for the div...
Sorry for the noobish question, I'm still learning this.
Thank you.
I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.
The problem is here:
var titleString = $("#thumb").attr("title");
$("#title").html(titleString);
When you're telling it to switch the text, you're always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:
var titleString = $(this).find('a').attr("title");
This assumes that you'll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you'll have to go through and add them if this is the way you decide to go.
Change the following:
1.
#main_view{
background: #FFFFFF;
left: 45%;
margin-top: 128px;
padding: 0 0;
position: absolute;
}
title{
background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;
}
Remove the inline style for the div with title as ID.
in the hover function of ($("ul.thumb li").hover) add the below line
after - $(this).css({'z-index' : '10'});
var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);
The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.
$(document).ready(function(){
//Larger thumbnail preview
var $title = $('#title');
$("ul.thumb li, ul.thumb2 li").hover(
function() {
var $this = $(this);
$this.css({'z-index' : '10'});
$this.find('img').addClass("hover").stop()
.animate({
marginTop: '-50px',
marginLeft: '-50px',
top: '50%',
left: '50%',
width: '100px',
height: '100px',
padding: '0px'
}, 200);
$title.stop().animate({opacity:0.4}, 200, function(){
$title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
});
},
function() {
$this = $(this);
$this.css({'z-index' : '0'});
$this.find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '75px',
height: '75px',
padding: '0px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a, ul.thumb2 li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
http://jfcoder.com/test/hoverfade.html
Related
Trying to get this sidebar to be scrollable. Right now you can navigate through it by clicking items within in (using jQuery to animate the margin upon clicking an item), but I'd like to add scrolling functionality as well.
I tried overflow: scroll without success. Any help?
https://codepen.io/Finches/pen/xpXZVW
$('.track-name').click(function() {
//Remove active class from all other track names
$('.track-name').not(this).removeClass('active');
//Add active class on clicked track name
$(this).addClass('active');
var id = $(this).attr("data-id");
var scrollAmount = id * -50;
console.log(scrollAmount);
$('.track-name-inner').animate({ marginTop: scrollAmount }, 300);
});
Not sure why they disappear when I click them but that's OK.
You needed to set an explicit height on the container in order for overflow:scroll to work.
Working codepen:
https://codepen.io/anon/pen/ZvXpva
.track-name-wrapper {
position: absolute;
left: 35px;
top: 50%;
width: 300px;
display: inline-block;
height: 300px;
overflow-y: scroll;
top: 150px;
}
fiddle
Please see the fiddle above.
There is a link which when clicked a hidden div slides out from the right.
The hidden div contains an image.
At the moment the hidden div slides out but appears at a distance from the 'contact' link, and then when it slides back it disappears before it slides behind 'contact'.
I want it to appear to slide out form behind 'contact' and back in behind 'contact' without any overlapping.
$('#contact').click(function () {
$('#contact-info').animate({width: 'toggle'});
});
You can do like:
var move = 80;
$('#contact').click(function () {
move = move===80 ? 160 : 80;
$('#contact-info').animate({right: move, width: 'toggle' });
});
Check Fiddle
Animate the right property as well.
$('#contact').click(function () {
var right = '160px';
if ($('#contact-info').is(":visible")) {
right = '38px';
}
$('#contact-info').animate({width: 'toggle', right: right});
});
http://jsfiddle.net/RichAyotte/cs23vzjv/1/
I found a way to do this by simply adjusting the css. fiddle
#contact {
background-color: #ffffff;
bottom: 34px;
padding-right: 38px;
position: fixed;
right: 0;
z-index: 1;
}
#contact-info {
bottom: 34px;
margin-right: -250px;
position: fixed;
right: 444px;
text-transform: lowercase;
white-space: nowrap;
}
Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery?
So far, I've tried things like:
.opacityFade:not(.classToExclude) {
STYLES HERE
}
or
$('controlElement').click(function(){
$(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});
Ideally, I'd like to avoid having to write more JS and better separate responsibilities,but there might not be a way to do that. Little new to Front-End development, so I'm not aware of a best way to go about doing this; thanks!!
You can achieve this by placing a blanket over all elements, and then pulling the element you want to display out of the DOM order with the z-index property
.item {
background: #f00;
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
.item.selected {
position: relative;
z-index: 200
}
.blanket {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 100;
}
Note that the element needs to have a non static position.
See http://jsfiddle.net/cyberdash/fCMaT/
you could add another class to the non-dimmed/active div. I'll put together a fiddle.
http://jsfiddle.net/nqT7V/
In Jquery:
$(".item").click(function(){
var $this = $(this);
$this.parent().addClass("dimmed");
$this.parent().find(".item").removeClass("active");
$this.addClass("active");
});
$(".holder").click(function(e){
if (e.target != this) return;
var $this = $(this);
if ($this.hasClass("dimmed")){
$this
.removeClass("dimmed")
.find(".item").removeClass("active");
}
});
I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.
What I want is to expand proportionally left-right-top-bottom by using animate.
Following is my coding. What I said above, it expand to bottom only.
$(document).ready(function() {
var theFrame = $("#FrmPatient", parent.document.body);
theFrame.animate({width: 650, height: 485}, 1000);
});
Try this:
<div id="frame"></div>
#frame {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #999;
}
$(function() {
var w = 400, h = 400;
$("#frame").animate({
width: w,
height: w,
marginLeft: -w/2,
marginTop: -h/2
}, 1000);
});
http://jsfiddle.net/GVj83/
You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.
In order to highlight a certain p element, I've written some JS to make it appear above a darkened background.
In order to do this, I used jQuery to create an overlay, and then clone the information p element and absolutely positioned it over the overlay.
Because it dropped a few CSS properties (not being inherited because of the new position in the page), I used jQuery to add them.
It works almost perfectly. In my Firefox 3.5.6 on Mac OS X, when it fades away, there is a slight disrepencacy of a matter of pixels. I know it's nitpicking, but I'd love to have it disappear and the end user not know the difference.
The test is available here: https://www.ikatanspa.com/book-online/?test
Here is the jQuery function too
var highlightFormSuccess = function() {
var fadeTo = 0.6;
var $info = $('p.information');
if ($info.length) {
// make overlay
var $overlay = $('<div />')
.css({
display: 'none',
width: '100%',
height: $(document).height(),
position: 'absolute',
top: 0,
left: 0,
zIndex: 32767,
opacity: 0
})
.attr({
id: 'overlay'
})
.appendTo('body');
// pull out success block and position above overlay
var left = $info.position().left,
top = $info.position().top,
fontSize = $info.css('font-size'),
width = $info.width(),
color = $info.css('color'),
lineHeight = $info.css('line-height');
var $newInfo = $info.clone()
.css({
position: 'absolute',
top: top,
left: left,
'font-size': fontSize,
'line-height': lineHeight,
width: width,
color: color,
zIndex: 32767
})
.appendTo('body');
$overlay
.show()
.fadeTo(1000, fadeTo);
// wait then fade back out
setTimeout(function() {
$($overlay, $newInfo).fadeOut(1000, function() {
$newInfo.fadeOut(250, function() { $(this).remove(); } );
});
}, 2500);
};
};
Perhaps you can make things a bit easier. I just replicated the desired effect by setting my paragraph rules to:
p.highlight {
position:relative;
background-color:#ffffff;
z-index:10;
}
And my overlay to:
div.overlay {
position:fixed;
background-color:#000000;
z-index:5; // lower than my paragraph, higher than all else
top:0; left:0; width:100%; height:100%;
}
--
<body>
<div class="overlay"></div>
<p>I'm a paragraph.</p>
<p class="highlight">I too am a paragraph.</p>
</body>