I have a number of DIVs currently laid out in an oval shape. Each div represents a "service" and is ID'd accordingly, all are set with an absolute position.
What I am wanting to do is on mouseover of a div, I want to have a new DIV with relevant information appear in the middle. This should happen for each "service" so each "descriptive" div will be hidden until mouseover but all appear in the same space.
The website in question is the home page of www.faa.net.au.
How do I go about making this new descriptive DIV appear on mouseover and hide on mouseout?
What you can do is position all of those divs in that spot in the middle with CSS. They can stack and the z-index doesn't matter since all you'll only see one at a time. Then hide them with "display:none" in your CSS.
Then use jQuery's .hover() method to show those the appropriate div on mouseover
$("#idOftheDivYouHoverOn").hover(function (e) {
//This funciton defines what happens on mouse-in or hover.
$("#idOfTheDefaultCenterDiv").hide();
$("#idOfTheDivYouWantedToShow").show();
}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.
$("#idOfTheDefaultCenterDiv").show();
$("#idOfTheDivYouWantedToShow").hide();
});
You'll have to do this for each one you hover on. There is a "smarter" way but it would be a very long answer to explain it.
That is if you want to do this using JavaScript/jQuery instead of just plain CSS similar to the ones you see in other answers. With this method you can add fading effects - take a look at jQuery's hover - http://api.jquery.com/hover/
Edit: Here's a working example: http://jsfiddle.net/6dMDS/
Hope that helps.
A friend in another forum just posted another way of doing this. Be warned it's CSS3 only so some browsers (and definitely older IE's) won't support it.
<div class="container">
<img class="one" src="http://placehold.it/100x100" />
<img class="two" src="http://placehold.it/100x100" /><br>
<img class="three" src="http://placehold.it/100x100" />
<img class="four" src="http://placehold.it/100x100" /><br>
<img class="five" src="http://placehold.it/100x100" />
<img class="six" src="http://placehold.it/100x100" />
<div class="hidden-one">hidden-one</div>
<div class="hidden-two">hidden-two</div>
<div class="hidden-three">hidden-three</div>
<div class="hidden-four">hidden-four</div>
<div class="hidden-five">hidden-five</div>
<div class="hidden-six">hidden-six</div>
</div>
* {margin: 0; padding: 0;}
.container {width: 400px;}
.one:hover ~ .hidden-one,
.two:hover ~ .hidden-two,
.three:hover ~ .hidden-three,
.four:hover ~ .hidden-four,
.five:hover ~ .hidden-five,
.six:hover ~ .hidden-six
{display: block;}
.hidden-one,
.hidden-two,
.hidden-three,
.hidden-four,
.hidden-five,
.hidden-six
{
width: 200px;
height: 300px;
border: 1px solid red;
display:none;
float: right;
position: relative;
top:-305px;
left: 10px;
}
http://codepen.io/anon/pen/LbfCl
So if I got it right, you got a "service" DIV and a "descriptive" DIV. Try some CSS to make it happen.
HTML:
<div id="service"></div>
<div id="descriptive"></div>
And CSS:
#descriptive
{
visibility:hidden;
}
#service:hover #descriptive
{
visibility:visible;
}
Basically this will make the DIV with id="descriptive" be shown when id="service" is hovered.
Related
I want my divs to change colour upon hovering over them, but the code is not executing even when I'm hovering. I'm not completely sure why, but I think there could possibly be an issue with the fact that I'm using a z-index on the class I want to hover over.
Html with script:
$(".eventContents").hover(
function() {
$(".eventContents").css("background-color", "yellow");
})
//making events square
var cw = $('.eventContain').width();
$('.eventContain').css({
'height': cw + 'px'
});
.eventContain {
position: relative;
margin-bottom: 10px;
z-index: -1;
background-size: cover;
}
.eventContents {
color: white;
padding: 5px;
position: absolute;
bottom: 0;
left: 0;
}
.eventContents h2 {
font-size: 2em;
font-family: 'Montserrat', sans-serif;
}
.eventContents p {
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="events">
<row>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/leaf.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/12.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/1.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
</row>
</section>
Here is the fiddle, the issue is more prominent here:
https://jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr
It seems to work for me, if I understood correctly, but here's a way to hover both on and off and use this instead of .eventContents twice more..
$('.eventContents').hover(
function() {
$(this).css('background-color', 'yellow');
},
function() {
$(this).css('background-color', 'red');
}
);
fiddle
https://jsfiddle.net/Hastig/4fjn0ndb/1/
The elements are being correctly hovered and the code is getting executed I've tested it, the problem is maybe that your elements are position:absolute; and they're all in top of each other, also they don't have a defined height and it's necessary because we are talking about div elements not img, maybe you'd want to check out your code a little bit better.
You'll want to put a top:0px; to your .eventContents because it's hidden on top (at least for this example)
One last thing, if you want to refer to the actual hovered element, you should use $(this) instead of the class name because it'll execute the code for all the elements with the class and not only the hovered one.
The negative z-index is the reason why the hover is not working, to fix it, make sure that the z-index of the element you want to hover over is positive. To avoid affecting the top nav bar, move the nav bar to the bottom of the html code file allowing it to naturally appear on top of everything else, avoiding the need to use a negative z-index on eventContain.
I have a setup where a double-wrapper contains several elements of varying height. They're all arranged next to each other via display: inline-block and vertical-align: top with one of them being considered 'active'.
<section class="gallery">
<div class="gallery__content">
<img class="gallery__item gallery__item--img" src="assets/GIRM/1.png" width="350" heigth="197">
<img class="gallery__item gallery__item--img" src="assets/GIRM/2.png" width="1280" heigth="800">
<img class="gallery__item gallery__item--img" src="assets/GIRM/3.png" width="1280" heigth="511">
<img class="gallery__item gallery__item--img" src="assets/GIRM/4.png" width="1135" heigth="742">
</div>
</section>
I want to limit the height of the wrapper (at either level) to the height of the active child, with overflow: hidden cutting off anything that's higher. Right now, I achieve this by using js to set outerWrapper.maxHeight = activeChild.height.
However, the children can be arbitrary elements, not just imgs and it's not unlikely that they will change their height. With the current js, I have to catch those occurances and reapply the max-height for the new value, if the height changes with a transition it gets even worse.
Is there a way to bind the height of either of the wrappers to the height of a specific child element in css, maybe by making it ignore all other elements for height-computation? If not, is there a better way to do this with js?
Does this work?
Code for the lazy:
HTML
<section>
<div id="under-wrapper">
<img class="child" id="child1" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="150">
<img class="child active" id="child2" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="300">
<img class="child" id="child3" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="350">
<img class="child" id="child4" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="200">
</div>
<div id="over-wrapper">
<img class="child" name="child1" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="150">
<img class="child active" name="child2" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="300">
<img class="child" name="child3" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="350">
<img class="child" name="child4" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="200">
</div>
</section>
CSS (minus the aesthetics)
section {
position: relative;
overflow: hidden;
}
#over-wrapper {
position: absolute;
top: 0;
left: 0;
}
img {
vertical-align: top;
width: 120px;
opacity: 0.3;
}
img.active {
opacity: 1;
display: inline-block;
}
#under-wrapper img {
visibility: hidden;
}
#under-wrapper img:not(.active) {
display: none;
}
JS (well, jQuery)
$('img').click(function() {
$('img').removeClass('active');
$(this).addClass('active');
var child = $(this).attr('name');
$('#'+child).addClass('active');
});
How did I do it?
I added a section wrapper with overflow:hidden (to cut off the extra) and position:relative (to contain the absolutely-positioned child elements).
I created two inner wrappers with the exact same contents, except that the latter has its id attributes replaced with name, for ease of access later on.
I left the first inner wrapper (under-wrapper) alone (it can just behave normally), but the second (over-wrapper) I made absolutely positioned. This is so the contents of this wrapper don't effect the height of the section.
I created a rule for the active class, so while inactive images in the under-wrapper are display:none, active ones are display:inline-block and visibility:hidden. This means only the active image will be influencing the height of the section, and the rest will be hidden. Meanwhile, all the upper images have to do are sit there and look nice.
The javascript is simple; just a click handler on the images which gives it the active class and takes away everybody else's. Clicking an upper image takes the name of it ('child1', 'child2', etc.) and selects the corresponding lower image with the matching id, and gives it the active class.
If this doesn't completely answer your question or I broke a rule, I'd be glad to change my solution. Maybe someone else can use it to find a more convenient/efficient solution that doesn't involve two sets of the same elements.
G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>
I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.
I found some code on the web which I got to work...The problem arose when I tried to expand it to 3 buttons..
The Original code in bold below...I tried to follow the code to add 2 more buttons, the buttons do appear but when I click buttons 2 and 3, they effect button 1 only...Button 1 works perfectly with the code below
<script type="text/javascript">
//preload images first
**img1=new Image()
img1.src="CommonFiles/ArrowBackShadow.png"
img2=new Image()
img2.src="CommonFiles/ArrowBackPress.png"**
img3=new Image()
img3.src="CommonFiles/ArrowUpShadow.png"
img4=new Image()
img4.src="CommonFiles/ArrowUpPress.png"
img5=new Image()
img5.src="CommonFiles/ArrowForwardShadow.png"
img6=new Image()
img6.src="CommonFiles/ArrowForwardPress.png"
</script>
Body....
<body>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img2.src"
onMouseup="document.images['example'].src=img1.src">
<img src="CommonFiles/ArrowBackShadow.png" name="example" border=0></a>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img4.src"
onMouseup="document.images['example'].src=img3.src">
<img src="CommonFiles/ArrowUpShadow.png" name="example" border=0></a>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img6.src"
onMouseup="document.images['example'].src=img5.src">
<img src="CommonFiles/ArrowForwardShadow.png" name="example" border=0></a>
</body>
I'm far from a webmaster...Thanks for your help...
Randall
Do it with CSS.
.button {
display: block;
/* hide text: */
font-size: 0;
color: transparent;
}
#up {
width: 100px; /* replace with the width / height of your image */
height: 30px;
background-image: CommonFiles/ArrowForwardUp.png;
}
#up:active:hover {
background-image: CommonFiles/ArrowForwardUp.png;
}
/* Same for forward */
And your html:
Up
Forward
If all the buttons are of the same width and height, you even could move the width and height into the .button section.
The pros:
Your html code looks by far clearer
It's easy to maintain.
Later, you could style your buttons completely different without touching the html, but just modifying the CSS style code.
Browsers with images disabled, blind people etc. have the text instead of the images
No java script is required (some users have disabled it).
Make sure that the identifiers are correct:
<a href="whatever.htm"
onMousedown="document.images['thishouldmatch1'].src=img4.src"
onMouseup="document.images['thishouldmatch1'].src=img3.src">
<img src="CommonFiles/ArrowUpShadow.png" name="thishouldmatch1" border=0></a>
I'm building a simple image gallery with jquery but running into an annoying problem. Since the images are of various sizes I have centered them all to make it look even. However the built in fadeIn/fadeOut methods throw this centering awry and I'm not completely sure what is going on. I tried manually adding the centering class again then manually adding css but cannot get the image to center once it has been turned visible. Thoughts?
css -
.center { margin: 0 auto; }
img.invisible { display: none; }
img.visible { margin: 0 auto; display: block;}
markup -
<div id="content" class="center gallery">
<img src="images/event/event_1.jpg" alt="alt-text" class="visible" />
<img src="images/event/event_2.jpg" alt="alt-text" class="invisible" />
<img src="images/event/event_3.jpg" alt="alt-text" class="invisible" />
<div id="selection" class="overlay">
<div class="select first">
<img src="images/event/event_1_small.jpg" />
</div>
<div class="select">
<img src="images/event/event_2_small.jpg" />
</div>
<div class="select">
<img src="images/event/event_3_small.jpg" />
</div>
</div>
jQuery -
function updateImage(img_num) {
var cur_img = $("#content img.visible");
var next_img = $('#content img[src^="' + img_path + img_num + '.jpg"]');
cur_img.fadeOut('600',function() {
next_img.fadeIn('600');
next_img.removeClass("invisible").addClass("visible");
cur_img.removeClass("visible").addClass("invisible");
});
}
You are adding margin: 0 auto; only to the .visible class, you need to apply that to all of your images:
.gallery img{margin:0 auto;display:none}
.gallery img.visible{display:block}
Okay well that was surprising. To fix this problem I tried using fadeTo which revealed that the problem was the images once being made visible were given display: inline; so all it took to fix this problem was.
.gallery { text-align: center; }
I thought jQuery was just changing the opacity but it appears to also change the display. Tricky.