'Hovering' elements when clicked - javascript

What I want is fairly simple, and I have two examples for it:
http://janvanderkleijn.nl/
http://studio-laucke-siebein.com/
When looking at these portfolio websites you see it's scroll based websites mainly relying on images. The interactivity I'm looking for is the clicking on an image, resulting in a 'hovering' element over the web page, further elaborating the project with text, images etc.
What I like about it is that you don't have to leave the home-page to look into a project, and it can be closed by either pressing the close button in the top right, or clicked anywhere outside of this element. Especially in Laucke-Sibein's webpage it's nice, that when you scroll far enough down, the element dissappears.
How hard is it to achieve a similar result? How does this function work? I've been looking all afternoon and failed to find something that helped me further.

As mentioned by others there are many jQuery plugins like lightbox, fancybox, etc. that are capable of outputting images and text. Or a jquery-ui dialog box would work.
Alternatively you could create your portfolio items inside div's and show them on click events.
<body>
<div id="project-list">
html showing images from your projects. <br />
<img src="img1.jpg" data-project="project1" />
<img src="img2.jpg" data-project="project2" />
</div>
<div id="project1" class="project">
html displaying <br />
your project 1
</div>
<div id="project2" class="project">
html displaying <br />
your project 2
</div>
</body>
Then css something like:
.project { position: absolute; top: 100px; left: 100px; display: none; }
#project-list.fixed { position: static; }
Then the using jQuery it would look like:
$(function(){
// add click handler to the images
$('#project-list img').click(function(e){
// if a project is visible then just return and let the
// document click handler handle the closing of the project
if($('.project:visible').length > 0){
return;
}
// get the data project attribute which tells you which project to open
var project = $(this).data('project');
$('#' + project).slideDown('slow');
// add the fixed class to the project list so that it doesn't scroll
$('#project-list').addClass('fixed');
// you must have this to keep the click event from bubbling up
// through the DOM and triggering the document click function
// which would close the project as soon as it opens.
e.stopPropagation();
});
$(document).click(function(){
// this closes the project when anything is clicked that doesn't
// have the event.stopPropagation function set.
$('.project').slideUp('slow');
$('#project-list').removeClass('fixed');
});
$('.project').click(function(e){
// you want this so if they click anything in the project it doesn't
// close the project.
e.stopPropagation();
});
});
See a fiddle here http://jsfiddle.net/wdv79yxw/1/

Sounds like you're looking for a modal window. There are tons of jQuery libraries out there, or even pure CSS solutions. A decent one that I've used is jQuery fancybox, which supports videos, iframes, content, a gallery of images. It's very robust.

Related

JQuery .hover() stops working when HTML onClick() event is triggered

I have a webpage that I am working on, and am trying to incorporate some JQuery into it. This project is my first time ever using JQuery, so I could be missing something very simple.
Some Background
I only have one event listener within my JQuery code (aside from the ${document).ready())
I have multiple click event listeners within a separate javascript file.
The JQuery .hover() event stops working (and gets stuck on registering as being hovered over) once any of the separate click events are triggered.
My code
jquery.js
$(document).ready(function() {
$(".inShop").hover(function(){
pop($(this).val());
var divToShow = $(this).parent("p").siblings("div.popup");
divToShow.css({
display: "block",
position: "absolute",
right: ($(this).offset().left - $(this).width() - 240) + "px",
top: ($(this).offset().top) + "px"
});
},
function(){
$("div.popup").hide();
});
});
index.html
<div id="list">
<div class="popup" style="display:none;">
<p id="head"><strong>Info</strong></p>
<p class="iInfo"><a id="effect">Effect: </a><a id="eFill"></a></p>
<p class="iInfo"><a id="owned">Owned: </a><a id="oFill"></a></p>
</div>
<p id="available"></p>
<p id="unavailable"></p>
</div>
script.js
var itemShopTxt = document.getElementById('available');
...
list1 += tBreak + `<input class="inShop" name="cpc" type="button" value="${i.name}: ${price} C" onClick="{shopping(this);}"/>`;
...
itemShopTxt.innerHTML = list1;
What I've tried
click function stops hover function from working - This was promising at first, but my css uses specific properties from the hovered element, so I wouldn't be able to strictly define it
jQuery refresh stops jQuery hover from working - This results in the same issue
This list does not include the links that I opened, read, and deemed irrelevant to my issue
I have included this GIF to better demonstrate what is happening:
I have researched this issue extensively, and used various different key words to try to find my answer, but nothing has worked for me. If I have missed something, please let me know.
JQuery code: How to show a div next to the hovered element with jQuery?
I think you could use event.stopPropagation() or event.preventDefaults()

Scrolling effect on click on a image

I'm trying to make a scrolling effect to a menu. To be precise i want to click on a image and when i click it the menu to scroll down by 1 with a fade effect or what ever effect to the next link.
Ahhh...Like a windmill wheel if u understand what i mean.:)
And couldn't find any info.
Here is my code :
<div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
<div class="menu">
About me<BR>
Portofolio<Br>
Contact
</div>
http://jsfiddle.net/WCtQn/242/
So when i click on that arrow to move the links from top to bottom or bottom to top,dosen't matter.
Thank you.
You can try this method. It reorders the list elements when the arrow is clicked
$('.img-fade').click(function() {
var last = $('a')[0];
last.remove();
$('br')[0].remove();
$('.menu').append("<br> " + last['outerHTML']);
});
You should learn how to use javascript/jQuery and show us what you've tried so far and what you're having trouble with next time you post here
If you want something fancier you could look to do something similar to this example, though I'd add some .stop()s to remove some errors it has
I'm no jQuery pro but I've come up with something that is close to what you're looking for. I spiced it up with a fade effect. I also removed the <br> tags and set the links to display: block;. You could modify what I have to something similar to what #Zeaklous has posted to remove them along with the element and add them back in.
http://jsfiddle.net/WCtQn/248/
$('.img-fade').on('click', 'img', function(){
var firstItem = $('.menu a').first();
firstItem.fadeOut(2000, function() {
$(this).remove();
$('.menu').append(firstItem);
$('.menu a').last().fadeIn(2000);
});
});

Can't seem to make jQuery onClick fadeOut work on my page

This is killing me. I have spent the better part of two days trying to make this work.
Ultimately, what I am trying to achieve is have a list of 3 items, "Light", "Regular", and "Deep" trigger the fade in of a specific div matched to each item on the list. I am using z-index to layer the divs above a background div.
So when I click on "Light", an image fades in above the background div, and if "Regular" or "Deep" are visible at the time of the click, they fade out (only 1 would be visible at a time anyway).
Basically, the jQuery is set up like this:
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
I have my html set up like this:
<div id="main_container">
<div id="main_top_left">
</div>
<div id="main_top_right">
<a id="main_right_line_one" href="#">Light</a><br />
<a id="main_right_line_two" href="#">Regular</a><br />
<a id="main_right_line_three" href="#">Deep</a>
</div>
<div id="main_bottom">
</div>
<div id="main_light_layover">
<img class="light_layover" src="/images/light_layover.png" />
</div>
And my CSS:
#main_light_layover
{
display:none;
position:absolute;
width:900px;
margin:0 auto;
padding:0px;
border:0px;
top:0px;
left:0px;
z-index:8;
overflow:visible;
}
.light_layover
{
position:relative;
top:10px;
left:-60px;
z-index:8;
}
My jQuery isn't that great, but this simply isn't working. I'm wondering if it's having problems since the target for the click is within a second div?
I started playing around with it more to see if I could get something more simple to work, like loading the image normally and using jQuery to fade it out on click, but I can't even get that to work on my specific page, yet I can get a barebones version to work on jsFiddle:
http://jsfiddle.net/UpX3L/197/
It seems like I simply can't get the target for fading to work at all on my specific page. Can anyone offer some insight?
EDIT - Here is a jsFiddle working the way I want the page to work:
http://jsfiddle.net/3XwZv/507/
Remove the e in your click function
$('#main_right_line_one').click(function(){
$('#regular_layover, #deep_layover').fadeOut('slow', function(){
$('#main_light_layover').show('slow');
});
});
$('#main_right_line_two').click(function(){
$('#light_layover, #deep_layover').fadeOut('slow', function(){
$('#regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#light_layover, #regular_layover').fadeOut('slow', function(){
$('#deep_layover').fadeIn('slow');
});
});
As mentioned in the comments to your post, you selectors are off.
# is the prefix used for ids, . is the prefix used for classes
Thus you want as selector $('.light_layover'), not $('#light_layover').
Also, if your div is hidden, your image may not be shown. So maybe you meant to be using $('#main_light_layover') rather than using just 'light_layover'?
EDIT: Looking at your code... You need to make sure that the elements from your selector are already loaded in the DOM before running $(selector). You can do this via $(document).ready(initialize) where initialize is the function that sets up the click handlers.
See jQuery.load and jQuery.ready

Can I use this code to show two different windows?

I am currently building a website that has certain images, when clicked will open up a movable pop up window like this here.
http://dhtmlpopups.webarticles.org/movable.php
(go down to the bottom and click the (fire) button to test it)
The code and source files are available on the top page
Instead of the submit button, I set it to a image. That has been working great.
Now, here is my problem. I need this to be, when clicked depending on the image, it will show different images in the pop up window. But when I duplicated the code and pasted it elsewhere on the same page it seems that no matter what I do it just shows the very first image and it doesn't change anything. Even when I changed the links to the image files. What exactly is wrong? why doesn't my second window change and have the same images as the first one?
Detailed example of what I'm trying to do
Image one is clicked and shows red image with movable window.
Image two is clicked and shows blue image with movable window.
The link you showed us is very old. So it would be stupid to support your tasks, because much of the functionality is handled in other ways today.
You can use jQuery with jQueryUI to make something like you want. You can watch Demos there but yours could be easy done by making this:
HTML
<div id="diag1"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div>
<div id="diag2"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div>
<img id="pic1" src="http://dummyimage.com/100&text=pic1">
<img id="pic2" src="http://dummyimage.com/100&text=pic2">
​Javascript:
$().ready(function(){
$("#diag1").dialog({ autoOpen: false });
$("#diag2").dialog({ autoOpen: false });
$("#pic1").click(function(){
$("#diag1").dialog('open');
});
$("#pic2").click(function(){
$("#diag2").dialog('open');
});
});
Also watch your DEMO on JS Fiddle.​​
UPDATE:
More beautiful would be this solution on JS Fiddle
Because you select the functionality with a class and save the open dialog in a data-openid Attribute. Be sure to understand the first example, before you start this one :) Also you have to know something about jQuery and CSS Selectors
HTML:
<div id="diag1" class="diagc"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div>
<div id="diag2" class="diagc"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div>
<div id="diag3" class="diagc"><img src="http://dummyimage.com/100/00ff00/FFFFFF&text=green"></div>
<img class="picdiag" src="http://dummyimage.com/100&text=pic1" data-openid="diag1">
<img class="picdiag" src="http://dummyimage.com/100&text=pic2" data-openid="diag2">
<img class="picdiag" src="http://dummyimage.com/100&text=pic3" data-openid="diag3">​
Javascript:
$().ready(function(){
$(".diagc").each(function(){
$(this).dialog({ autoOpen: false });
});
$(".picdiag").each(function(){
$(this).click(function(){
$("#"+$(this).attr("data-openid")).dialog("open");
});
});
});

showing floating div in a gridview

I have a gridview and when i mouse hover on a particular column, i am loading an external div(position:absolute) into that position.This i have done by calling a js function in the onmouseover event of the gridview cell(gvTestGrid.cells[1].attributes.add("onmouseover","loadDIV();")).
I am able to load the div properly on mouse hover, but the problem is my loaded div contains a dropdown and button inside it. when i try to move my mouse inside the div to click the button or select the dropdown list, the div moves away.This happens after i added
onmouseout event(gvTestGrid.cells[1].attributes.add("onmouseout","removeDIV();"))
without onmouse out event my div will remain loaded there on the gridview cell.Please help
i have done a small sample
<html>
<div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
Yes its me
</div>
<table>
<tr><td>A</td></tr>
<tr><td>S</td></tr>
<tr><td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);">D</td></tr>
<tr><td>E</td></tr>
</table>
</html>
<script language="javascript" type="text/javascript">
function loadDIV(evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.position='absolute';
myWin.style.left = evt.x;
myWin.style.top = evt.y;
myWin.style.display='block';
}
function removeDIV(obj,evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.display='none';
myWin.style.left = 0;
myWin.style.top = 0;
}
</script>
if you try to enter mouse into the div it will move away.Any solution for this please??
How about removing the div after you are done with the work in the DIV you have popped up? So you would close the DIV when you click the button in the DIV (Assuming it does work and should close afterward) or in a similar manner.
Set a small timeout for hiding the div and clear this timeout in the onmouseover handler for the div.
It seems like the onmouseout event should be attached to the div.
If you don't have Anchor tags in this content, may I suggest some CSS magic?
CSS here
a.MyCellPopup div.MyPopup {display:none;}
a.MycellPopup {position:relative;} /* Make pop up's position relative to the anchor tag */
a:hover.MyCellPopup div.MyPopup {display:block;position:absolute;top:10px;left:10px}
HTML Here
<a href="#" onclick="return false;" class="MyCellPopup">
<div class="MyPopup">POP UP STUFF without links (links won't work)</div>
</a>
I have an onclick="return false" so if they click on the cell, they won't be brought to the top of the page. The href needs to be in there or else IE won't recognize the hover. I got this idea from ZenGarden for how to do simple pop ups.
If this still doesn't work I highly recommend visiting the YUI library, they have a javascript widget for exactly this problem.

Categories