Im work with this script :
I want to show/hide text on click, with a single id it works great ( add a fade animation will be great ) but I'm not able to add another ID .. someone could help me ?!
THANKS
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
/**/
#wrap {
float:left;
width:100%;
margin-top:20px;
max-width: 320px;
padding: 5px;
background-color: #f2f2f2; }
#wrap p{
border-bottom:none;
border-top:none; }
#wrap img{margin: 0 auto; margin-bottom:15px;}
h1 {
font-size: 200%; }
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
background:#fff;
color:#333;
padding: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.hideLink {}
a.showLink:hover, a.hideLink:hover {
color:#E99473;
}
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
According to HTML specification an id property of the element must be unique. You either need to assign different ids to each of your elements, or target them by some less restrictive parameter, such as class.
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example1" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example2" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div id="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/>
+ INFORMAZIONI
</p>
<div id="example3" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
However, you're probably better off using jQuery. With it you can do all kinds of selectors and manipulations (including fade effects) and have more reliable and cleaner code.
Here's your code rewritten without any ids:
jQuery(function() {
jQuery('.showLink,.hideLink').click(function() {
jQuery(this).closest('.wrap').find('.more').fadeToggle(500);
});
});
/**/
.wrap {
float: left;
width: 100%;
margin-top: 20px;
max-width: 320px;
padding: 5px;
background-color: #f2f2f2;
}
.wrap p {
border-bottom: none;
border-top: none;
}
.wrap img {
margin: 0 auto;
margin-bottom: 15px;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
}
a.showLink,
a.hideLink {
text-decoration: none;
background: #fff;
color: #333;
padding: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.hideLink {}
a.showLink:hover,
a.hideLink:hover {
color: #E99473;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
+ INFORMAZIONI
</p>
<div class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div class="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
+ INFORMAZIONI
</p>
<div class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
<div class="wrap">
<p>
<img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
+ INFORMAZIONI
</p>
<div class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
</div>
id values should never be same. Maintain unique id values. Then
If you want to show/hide that particular element, with unique id values and respective function:showHide('uniqueIdVal') your existing script should work.
If you are trying to hide/show all the elements on a single click, then you can select all such elements by maintaining a dummy class - XYZ for the elements and finding the elements by document.getElementsByClassName("XYZ");
Related
I have two div connected to each other through svg line(implementation from d3js chart). On certain action, I want to fade/greyout some of the divs. I am able to achieve it by setting opacity 0.5. But it makes the div transparent so background svg line gets visible. I have created a jsfiddle to demo the issue.
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;">
<div class="child1">
text
</div>
<div class="child2">
</div>
</div>
<div id="div2" style="width: 100px; height: 100px; top:200px; left:200px; background:#333; position:absolute;">
<div class="child1">
text
</div>
<div class="child2">
</div>
</div>
<svg width="300" height="250"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
<button onclick="fade()">
fade
</button>
<button onclick="reset()">
reset
</button>
function fade () {
document.getElementById('div1').className = 'greyout';
}
.greyout {
opacity: 0.5;
}
jsfiddle link
Is there any way to hide line inside div when opacity is set to 0.5?
mock screen(requirement):
Thanks!
Okay, so here is a solution that allows you to keep the logic with the opacity, but with a slight change to the structure of html elements.
I have just added a wrapper div around the "cards" (div1 and div2) and moved all inline styles to it except the background property, then gave the wrapper a new background: white; (you can give it any color you like).
The idea is that the outer wrapper doesn't recieve any opacity and stays opaque, but the inner "card" div1 / div2 can recieve the opacity you want without any other elements showing through:
function fade() {
document.getElementById('div1').className = 'greyout';
}
function reset() {
document.getElementById('div1').className = 'reset';
}
.greyout {
opacity: 0.5;
}
.reset {
opacity: 1;
}
.child1 {
height: 25px;
width: 100px;
background-color: #3690e7;
}
.child2 {
height: 75px;
width: 100px;
background-color: darkgrey;
}
<div style="width: 100px; height: 100px; top:0; left:0; position:absolute; background: white;">
<div id="div1" style="background:#777;">
<div class="child1">
text
</div>
<div class="child2">
</div>
</div>
</div>
<div style="width: 100px; height: 100px; top:200px; left:200px; position:absolute; background: white;">
<div id="div2" style="background:#333;">
<div class="child1">
text
</div>
<div class="child2">
</div>
</div>
</div>
<svg width="300" height="250"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
<button onclick="fade()">
fade
</button>
<button onclick="reset()">
reset
</button>
You can use:
.greyout {
filter: grayscale(70%);
}
Or another percentage depending on you taste.
I have a div that has class name ordershape and it contains another div fad-res.
I want that when I would hover over a particular ordershape, I want to show the corresspondingfad-res whose parent div I hovered, while other divs must be hidden.
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
Your HTML is invalid since you haven't closed the div with the class ordershape
No reason to use jquery for this, CSS can easily achieve this:
.ordershape:hover .fad-res{
display:block;
}
Demo CSS
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
.ordershape:hover .fad-res{
display:block;
}
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>
If you want to do it with jquery do it like this.
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
Demo jQuery
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>
Do not use javascript for that - rely on the CSS transition and opacity properties instead, with :hover selector.
.fad-res {
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
background: #555555;
height: 60px;
width: 100px;
}
.ordershape {
background: #f6f6f6;
height: 100px;
width: 100px;
float: left;
margin-right: 2px;
}
.ordershape:hover .fad-res {
opacity: 1;
}
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
Well, you can try the jquery version this way
$(".ordershape").hover(function(){
$(this).find(".fad-res").toggle();
})
.fad-res{
display : none;
}
.ordershape{
width : 20px;
height: 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
I have a video iframe that expands when clicking a button. This is contained inside of a header for the page which has 100vh height (full screen). When the video expands, it pushes the rest of the content in the header up in order to have everything vertically centred within the header. Instead, I would like to increase the height of the header div beyond 100vh to 100vh plus the video height. However, the code I have so far isn't working.
LINK TO PAGE
$(document).ready(function(){
$(".video" ).click(function() {
$(".header").height("+=315");
document.getElementById("video__player").style.maxHeight = "50vw";
document.getElementById("video-btn").style.display = "none";
});
});
.header {height: 100vh; width: 100vw;}
.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
.video__container {text-align: center;}
.video {color: gray; width: 100%; height: auto;}
.play-btn {width: 20px; height: 20px; vertical-align: middle;}
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
<div class="header" id="header">
<div class="header__menu">
<div class="header__menu--left">
<div class="logo">
<img class="logo__full img__full" src="assets/kbd-logo-english.svg">
<img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg">
</div>
</div>
<div class="header__menu--right">
<div class="phone">
<h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9>
</div>
<a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
<div class="language">
<h9 class="clickable strong" style="color: #5CBDE1;">FR</h9>
</div>
</div>
</div>
<div class="header__content">
<div class="header__content--container animatedParent animateOnce">
<h1>Hi, we're KBD Insurance.</h1>
<br>
<h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2>
<br><br>
<div class="quote__wrapper header__quote--wrapper">
<a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
</div>
<br><br>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
The margin of .header__content--container is currently set to auto. Change the margin to some hard-coded value like, for example, 300px, and it works like you want it to.
EDIT: the requested function
function setMarginTop() {
const $header = $(".header__content--container");
const marginTop = $header.css("margin-top");
$header.css("margin-top", marginTop);
}
I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>
It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/
It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?