hover over image unwraps a hidden div - javascript

I have seen these on many sites. Basically, I'm creating a portfolio and I have a number of divs (squares in grid format) showing screenshots of my projects. I want to be able to hover over each project with my mouse which will in turn slide in a previously hidden div revealing specific information about that particular project.
Basically, I am looking for something simple like this: http://iamyuna.com/
Notice if you hover over each shape (i.e. project), it quickly "unwraps" to reveal another image underneath. This may be a bad example since what I want is for the description to show up instead of another picture. However, I love how quickly it unwraps to show the hidden content.
Below is how my html is laid out. Would it be possible to implement something similar for my own work? If you guys can help me get started on this or suggest keywords to start with (I've been searching for a tutorial for hours but can't find one), I'd really appreciate it. Thank you.
<article class="project" data-id="248">
<div class="project-mask">
<div class="thumbnail">
<img src="image.jpg">
<div class="description">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
</div>
</article>

Vary basic implementation:
$('.thumbnail').hover(function () {
$('.description', this).stop().animate({
bottom: 0
}, 200);
}, function () {
$('.description', this).stop().animate({
bottom: -100
}, 200);
});
Demo: http://jsfiddle.net/LAkmA/

You could do this just in CSS with something like this:
.thumbnail img { display:block; }
.thumbnail div.description { display:none; }
.thumbnail:hover img {display:none; }
.thumbnail:hover div.description {display:block; }

<script type="text/javascript">
$(".thumbnail img").hover(function(){ $(".description").css("display", "block"); }, function(){ $(".description").css("display", "none");});
</script>
Note : this is done using jQuery and you need to set .description's display to none
also it would be much better to use IDs instead of classes and that would be something like :
<script type="text/javascript">
$("#IMG1").hover(function(){ $("#DESC1").css("display", "block"); }, function(){ $("#DESC1").css("display", "none");});
</script>
and then you can turn that into a function etc.
PS: Again this uses jQuery so you need to implement it in the head section (preferably) and before this code anyway

Related

How to simulate click on a display:none on hover image (how to listen for any mouse click in a browser)

On a website (find it by the link) I have links with images in footer (screenshot)
I have found a great glitch effect in a footer icons which I want to use. It chages images randomly if code looks like that:
<footer class="footer text-center">
<a target="_blank" href="http://link1.com"><img src="f2.jpg"></a>
<img src="f3.jpg">
<a target="_blank" href="http://link3.com"><img src="f1.jpg"></a>
<a target="_blank" href="http://link4.com"><img src="f5.jpg"></a>
<a target="_blank" href="http://link5.com"><img src="bc.png"></a>
<img src="mail.jpg">
</footer>
and simple style
.footer img:hover {
display:none;
}
But in that scenario click while hovering on of the image footers gives no result.
I've tried to use javascript:
var a_href
$("footer a").on("mousemove", function() {
a_href = $(this).attr('href');
console.log(a_href);
});
$(document).click(function(){
console.log("!!!!!!!!!!!");
console.log(a_href);
window.open(a_href,'_blank');
});
Idea was to save the last hovered link and then emulate the click on it by clicking any other element. But that method works only if I click anywhere ELSE than a space over the glitchy icons. Same with $('body').click, $('.footer').click.
I've tried to overlay footer with other div on which i'd be putting .click but then display:none on hover doesn't work.
Here is a jsfiddle - http://jsfiddle.net/yssdjr17/1/
What should I do? Thank you.
UPD
If we use something instead of a display:none we loose the cool glitch effect that way. We loved how randomly elements collapsed and that user might click on one of the elements, but never sure on which one. Some sort of a minigame for him.
Is there a way to listen for a mouseclick, in browser, no matter on what element?
Don't use display: none, use visibility: hidden instead. This way the element will still be there, just not visible.
.footer img:hover {
visibility: hidden;
}
JSFiddle demo.
The effect makes it look broken.
You can't fire the click event from anything hidden or not displayed.
Instead try:
<div id="awesomelink" onclick="openawesomewindow('http://link1.com');"></div>
#awesomelink
{
height:60px;
width:60px;
background-image:url('f1.jpg');
}
#awesomelink:hover
{
background-image:url('awesomecrazyanimated.gif');
}
It's how I'd do it and you'll get a more consistant result across different browsers.
Also the menu of icons won't be shortened by one element making savvy surfers afraid to click.

Fade in, Fade out Divs

I'm trying to build a webpage that is essentially one page, but with four 'hidden' divs that will fade in and out of visibility when you click on menu buttons along the bottom.
I would like to put a 'close' button at the top of each of these divs so you can 'close' that div - but it would be great if the div still faded out on its own when a new menu item is clicked. So far I've created the div boxes and the links using css and html, but I'm an absolute newbie when it comes to javascript. Here's the code I have so far
HTML:
<div class="menu">
<a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`
(NOTE: I only put google as the link target because I didn't know what else to put).
CSS:
.aboutmewindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.portfoliowindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.educationwindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}
.contactwindow
{
width:583px;
height:557px;
border-bottom-style:dashed;
position:absolute;
top:0px;
z-index:2;
}`
I've tried writing a little bit of the javascript on my own, but it's seriously out of my depth at this point. I'm going to keep going through tutorials though, so hopefully I'll get the hang of it.
Anyone have any suggestions? Or good tutorials?
Thanks!
you can try this its a simple example but without all your markup and code you can get the idea .. requires jQuery
http://jsfiddle.net/YnzRV/9/
$(function(){
$("#main > .box").not(":first").hide();
$(".menu").on("click", "a", function(){
var $this = $(this),
dataBox = $this.data("box");
$("#main > .box").hide();
$("."+dataBox).fadeIn(400);
return false;
});
});
if you check the jsfiddle you will see how i added data attributes that get passed through the click handler to tell it which div to show using the data attributes
This is a slightly outdated (August, 2012) tutorial showing you the HTML, CSS, and JavaScript required to fade elements in, fade them out, and fade them to a specific opacity.
http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/
You're essentially trying to learn about the following:
.fadeIn()
.fadeOut()
.fadeTo()
jQuery's .click() handler
jQuery's .on() handler
You can use fadeIn() or fadeOut().
Use it like this:
$('selector').fadeIn(); // you can use time in ms, inside ()
Similarly, you can use fadeOut too. But keep in mind, that you have the latest version of jQuery linked to your web page.
Links:
http://jquery.com

JQuery slideUp and slideDown the whole <section>

Good night, morning, afternoon...
I'm developing a website that the whole content slides up and down... I have thought in many possibilities but still couldn't find an answer. Note that the index/intro/main page is the second section. My inspiration is :
http://www.pulpdesign.it/
Thanks , in advance.
<section class="tips-content">
</section>
<section id="intro">
<h1 id="intro-logo">bla</h1>
<span id="title">blabla</span>
<nav id="navigation">
<span class="curriculum"></span><span id="curriculum">currículo</span>
<span id="contact">agendamento</span><span class="contact"></span>
<span id="services">serviços</span><span class="services"></span>
<span id="tips">dicas</span><span class="tips"></span>
</nav>
</section>
<section id="curriculum-content">
<div style="height:100%; background:red;">
</div>
</section>
<script>
$(document).ready(function(){
$("#go_curriculum").click(function(){
$(".tips-content").slideDown("slow");
});
$("#go_tips").click(function(){
$("#curriculum-content").slideUp("slow");
});
});
</script>
</body>
I'm the developer who wrote that site :)
First, thanks for taking that as inspiration!
Then, to answer to your question, you'll need, as CP510 said, a general wrapper with
overflow:hidden; height: 100%; width: 100%
I used the body tag, that actually isn't the best choice, it's better to use a
and inside that container you'll have all of your section with
position: absolute;
width: 100%;
height: 100%;
because the you'll have to animate the
scrollLeft/scrollTop
properties of the container with jQuery, and using body as main container I had to deal with some safari's bugs.
Another trick is to think about your sections as the sides of an opened cube. So your main section won't be at
top: 0; left: 0
but at
top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;
and so on with the other sections.
I hope I made it quite clear, my English isn't so good. If you have any other questions just ask!
This is a tricky one. But I have done it. The basic idea is to use a raw $().animate() function to move all this fun stuff around. Since slide up/down are just helper functions for this.
The next requirement is that the sections are absolutely positioned in a wrapper. It's a bit wonky but heres the psuedo layout
<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
<DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
<CONTENT DIVS POSITIONED CORRECTLY>
</DIV>
<DIV>
Now what you do is move the absolutely positioned content container (the second div) to show the section using jquery.
$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);
Now the POSITION_TOP and POSITION_LEFT placeholders could be a variable that gets set based on the navigation button thats hit. The cleanup_callback is an optional function if you want something to happen when the document arrives on that location.
Thats the jQuery way. There is a CSS way by using classes and transitions. It works by changing the holding containers class to basically declare where the target page is, then because CSS transitions are on, the movement is animated. Each of these "navigation classes" basically just dictate the top and left position properties.
Have a look on this EXAMPLE just to understand the basic idea on how this logic works.
This example has 3x2 full page divs( 6 pages total) and we are not using any JavaScript at all it's all CSS and HTML.
Please note that in order to remove the scrollbars from the page you will need to uncomment the below in the body style
body {
white-space: nowrap;
/*overflow:hidden; UNCOMMENT THIS*/
}
jQuery for a smooth animation
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
You can also have a look on this Website as it is very similar to what you want to achieve

Click doesn't always trigger toggle-event

I have sort of an imagemap, which is basically a lot of absolutely positioned divs, which, when clicked, will show or hide a tooltip. Looks pretty great, apart from the fact, that it doesn't always "work". It sounds silly, but some times I will have to click a couple of times to trigger the event. Maybe I'm just not clicking hard enough? ;)
Markup
<div class="container">
<img src="img.png" />
<div class="trigger"
<div class="tooltip">
Awesome tooltip is awesome!
</div>
</div>
</div>
Style
.container {
width:100px;
height:100px;
position:relative; }
img {
position:relative; }
.trigger {
width:50px;
height:50px;
position:absolute;
top:50px;
left:50px; }
.tooltip {
width:100px;
height:20px;
position:absolute;
top:35px;
left:35px;
display:none; }
Javascript
$(".trigger").toggle(function () {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}, function () {
$(this).children(".tooltip").fadeOut(200);
});
The markup and CSS is simplified, but imagine I have several tooltips over the image. When I open one tooltip, all others should be closed. I'm guessing this is where things go wrong, but I can't see the error.
In a similar function on the same site, I've semi-dynamically added some IDs, and hide all that is :not(ID), but I just can't believe that should be necessary.
EDIT:
Behold, a Fiddle: http://jsfiddle.net/CfYRv/
change your javascript to something like
$(".trigger").click(function () {
$(".tooltip").fadeOut();
$(this).children(".tooltip").fadeIn();
});
Gah! Need to finish my homework, but long answer short: toggle doesn't work here because you toggle a submenu but then click another. this hides the first submenu, but it's still considered open (it was only hidden). Thus you need to click it twice to open it... I hacked together an alternative but it's not the best code. It'll at least give you an idea what needs done:
http://jsfiddle.net/uj2A4/
$(".trigger").click(function () {
if($(this).hasClass("active"))
$(".tooltip",this).fadeOut(200);
else {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}
$(this).toggleClass("active");
$(this).siblings(".trigger").removeClass("active");
});
Rather than toggle, let's use click: http://jsfiddle.net/CfYRv/3/
This assigns the "active" tooltip a css class "ttactive". Clicking on "some trigger" will fade out every active tooltip, and activate the one you just clicked. If the one you just clicked was the active one, all it does is fade that one out.
You could probably still use toggle this way:
$(".trigger").click(function () {
$(this).children(".tooltip").stop(true, true).toggle();
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
});

a jQuery image-group animation

I've got a div with three same images.
<div>
<img class="movlights" src="files/images/movelights.png" alt="10 years logo" />
<img class="movlights sec" src="files/images/movelights.png" alt="10 years logo" />
<img class="movlights third" src="files/images/movelights.png" alt="10 yearslogo"/>
</div>
Each has different "absolute" position in a way that all form a row and their parent div is
overflowed - hidden.
So I animate them moving together simultaneously as a group from left to right with this code:
$(function(){
movelights();
});
function movelights(){
for(x=0;x<3;x++)
{
$('div img:eq('+x+')').animate({left: (1400 - x*800)},24000);
}
};
My problem is:
How to return an image on a certain starting position before the others by queuing it again when it passes the div's right edge so that the animated pattern repeats itself!
So I'm interested in both:
how to queue image from end of the
line to beginning
how to loop the animated pattern
Hope I was clear enough English isn't my native language.
Here's some additional code:
div{
width:1000px;
overflow:hidden;
position:relative;
}
all img{
display:block;
position:absolute;
left:120px;
}
img2{
left:-678px;
}
img3{
left:-1400px;
}
I had the same problem. Try using timer = setTimeout(functionname to loop, 0);.
Whenever I ask a jQuery question someone usually responds with a link to some bloated plugin someone else built. The question was how to do something not where to download something.

Categories

Resources