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
Related
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.
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
I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!
jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.
What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.
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);
});
I would like to expand/collapse a div when this div is clicked on. It already works with onmouseover/onmouseout, but I would prefer onclick.
Now, the problem seems to be the content of the div:
This works:
<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>
This doesn't work:
<div onclick="alert('works')">
<div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
<script>
document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
</script>
</div>
</div>
But this (onmouseover instead of onclick) works again:
<div onmouseover="alert('works')">
<div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
<script>
document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
</script>
</div>
</div>
I guess it must be some layering issue, but I tried putting the "onclick" into each of the different div/iframe layers and I couldn't get it to work. I'm a beginner and it'd be great to get a tip on what's wrong! Thanks!
I would recommend using JQuery for this.
You can do what you wanna do with 1 line of code.
write a test.js like this:
$(document).ready(function() {
// hides the div as soon as the DOM is ready
$('#yourDiv').hide();
// shows the div on clicking the noted link
$('#yourDiv-show').click(function() {
$('#yourDiv').show('slow');
return false;
});
// hides the div on clicking the noted link
$('#youDiv-hide').click(function() {
$('#yourDiv').hide('fast');
return false;
});
// toggles the div on clicking the noted link
$('#youDiv-toggle').click(function() {
$('#yourDiv').toggle(400);
return false;
});
});
Then import this javascript to your HTML,JSP etc...
If you set the first div with border 10px and click on that border it will work.
As you start a new div the first div is just the container, any javascript calls will not be triggered.
like border: 50px solid; you will see what i mean.
The onmouseover works because you actually go over the invisible line of the div.
JavaScript events are supposed to 'bubble' up through the ancestry of DOM nodes from the one you click, all the way up to the body node, executing any appropriate handlers registered for those nodes along the way, unless a specific event handler stops the propagation of that event.
I suspect the iframe is your issue, since that is a separate HTML document, with a separate event chain, and that events don't bubble out of that, but I don't know for certain.
I would try the jQuery suggestion above, but I think this particular situation is not going to allow even jQuery to work.