Need an advanced javascript toggle function.
(I have no experience with writing my own js and hope someone can help me).
When clicking on an img then make an other div from height=0 to height=auto (animated).
I have duplicated the code so the toggle need to show - hide only the childs/parent div and not troggle all divs with the 'i-more' class.
I made a fiddle to show what I want to do:
EXAMPLE IN FIDDLE HERE >
HTML:
<div class="i-holder">
<div class="i-left">
<img class="i-one" src="http://placehold.it/200x120.jpg" />
<div class="i-more">
<img src="http://placehold.it/200x120.jpg" />
<img src="http://placehold.it/200x120.jpg" />
<img src="http://placehold.it/200x120.jpg" />
</div>
</div>
<div class="i-right">
<h2>Header here</h2>
<p>Text here text here text here text here text here text here text here...</p>
<img class="i-btn-more" src="http://placehold.it/40x30.jpg" alt="read more" />
<div class="i-more">
<p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
<p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
Show less
</div>
</div>
<div class="clear"></div>
<div>
<h2>More stuff like above here...</h2>
<p>A duplicate from above.</p>
<p>when click on the i-btn-more only that text and thumb will be visible and not all divs with that same class.</p>
</div>
</div>
CSS:
.i-more{height:0; overflow:hidden;}
.i-holder{width:600px; margin:20px; position:relative;}
.i-left img{display:block; margin-bottom:10px;}
.i-left{float:left; width:200px; background:#fc1; min-height:130px; }
.i-right{float:right; width:320px; padding:0 50px 10px 10px; background:#6d1; min-height:130px; }
.i-btn-more{position:absolute; cursor:pointer; margin:-40px 0 0 330px;}
.i-more{clear:both;}
.clear{clear:both;}
Have your styles in a classes, for example to toggle display:
.shown{
display:block;
}
.hidden{
display:none;
}
Then you just have to find what element you want with a jQuery selector.
So:
$('.i-btn-more').click(function(){
$('.classToHide').toggleClass('shown').toggleClass('hidden');
});
Make sure it starts with either the .show class if it is showing or the .hidden class if it is hidden by default. Then the toggleClass function will turn the class on and off; and therefore, the styling.
To select somethings and not certain of those something, use the jQuery .not() function to filter a selector. For example $('.more').not('p').toggleClass('hidden'); will toggle the class hidden for all things with the class .more except <p> paragraphs.
$('.i-btn-more, .i-btn-less').on('click', function (e) {
e.preventDefault();
$(this).parents('.i-holder').find('.i-more').toggleClass('shown hidden');
});
or this code:
;(function() {
'use strict';
$(function() {
var $containers = $('.i-holder');
$containers.each(function() {
var $container = $(this),
$more = $container.find('.i-more'),
$handlers = $container.find('.i-btn-more, .i-btn-less');
$handlers.on('click', function() {
$more.toggleClass('shown hidden');
e.preventDefault();
});
});
});
})(jQuery);
Related
I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}
I want to display my text after my thumbnail slider div something like this,
my active slider class: "itm0 selected"
my thumbnail id: "thumbs"
i want to display text below my #thumbs div automatically when it is active
i tried this CSS, but not worked,
.itm0 .selected{
#thumbs::after{
content:"first active image";
}
}
.itm2 .selected{
#thumbs::after{
content:"second active image";
}
}
html:
<div id="thumbs">
<img class="itm0 selected"></img>
<img class="itm1"></img>
</div>
when 2nd img active in slider
<div id="thumbs">
<img class="itm0"></img>
<img class="itm1 selected"></img>
</div>
etc.
anyone have some solution?
or how can I do it in javascript?
I am new newbie.. give some idea friends
If you're open to using jQuery, you can do the following.
Fiddle: https://jsfiddle.net/79fryyz1/
HTML
I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.
<div id="thumbs">
<img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
<img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
Toggle
JS
When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.
$('.toggleBtn').click(function() {
$('img').toggleClass('selected');
var caption = $('img.selected').data('caption');
$('.caption').html(caption);
});
That's a strange way of doing it, but here's how it could work...
.thumbs {
width:100px;
height:100px;
float:left;
margin:10px;
background:green;
}
.thumbs:after {
content: ' ';
position:absolute;
background:#000;
color:#fff;
border-radius:5px;margin:100px 0 0;
}
.thumbs:nth-child(1):hover:after {
content:"first thumb";
}
.thumbs:nth-child(2):hover:after {
content:"second thumb";
}
<div class="thumbs"></div>
<div class="thumbs"></div>
I want to hide the text First Text only, using (opacity:0) when I mouse over the topblock.
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
But I When i use following jQuery code i am getting child DIV text also First Text Inner Text
$(".topblock").on("mouseenter",function(){
console.log($(this).text());
$(this).css({"opacity":"0"})
}).on("mouseleave",function(){
});
To do what you require without amending the HTML structure will be exceptionally difficult as you would need to amend the textNode holding the First text value directly.
Instead it would be far simpler to just amend your HTML to wrap that text in another element, such as a span, and perform the operations on that element. Try this:
<div class="topblock">
<span>First Text</span>
<div class="block">
Inner Text
</div>
</div>
$(".topblock").on("hover",function(){
$(this).find('span').toggle();
});
You can't just hide a part of a block. You can put First text in a span and hide the span when your mouse enter the topblock block
Impossible to do using opacity, but you could accomplish it by setting the color to match the background color on hover.
Here's how to achieve the effect while hovering .topblock except when hovering its .block child. Note the use of CSS !important:
$('.topblock').hover(
function() {
$(this).addClass('white');
},
function() {
$(this).removeClass('white');
});
$('.block').hover(
function() {
$('.topblock').addClass('black');
},
function() {
$('.topblock').removeClass('black');
});
.topblock .block, .black {
color: black !important;
}
.white {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
This question already has answers here:
hover on child without hover effect on parent [duplicate]
(2 answers)
Closed 7 years ago.
I have a fiddle: http://jsfiddle.net/a80h6pts/1/
<style>
.myhover {
width: 120px;
}
.myhover:hover p{
color: #FED242!important;
}
</style>
<div id="divParent" class="myhover">
<p>Some text</p>
<p>Text text text</p>
<div id="divChild" class="myhover">
<p>Example text</p>
</div>
</div>
When my mouse activates the over for #divParent, I want all <p> tags to change color except for the <p> inside #divChild. Then when I move my mouse to #divChild, I want all <p> tags inside it to change color and the <p> of #divParent back to their original color.
I cannot remove or change the class .myhover or use javascript. How can I do it only with CSS?
EDIT:
Badly, some people think i have to use js. I can use js (jquery) with a minimal impact on html/css.
With jQuery you can use:
$('#divParent').mouseover(function () {
$('#divParent > p').addClass('hover')
}).mouseout(function () {
$('#divParent > p').removeClass('hover')
})
$('#divChild').mouseover(function (e) {
e.stopPropagation();
$('#divChild > p').addClass('hover')
}).mouseout(function (e) {
$('#divChild > p').removeClass('hover')
})
.myhover {
width: 120px;
}
.hover {
color: #FED242;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divParent" class="myhover">
<p>Some text</p>
<p>Text text text</p>
<div id="divChild" class="myhover">
<p>Example text</p>
</div>
</div>
As others have already noted, since there is no parent CSS selector you can't use CSS alone.
I'm working on my portfolio website, but can't solve the following problem.
The website is basically just pictures, if you click on one,
a semi-transparent fullscreen div opens with information (more pics and some text).
If you click again the div will close.
jQuery for hiding and showing:
<script>
$(function()
{
$('.masonryImage').click(function()
{
$('.hiddenDiv').show();
$("body").css("overflow", "hidden");
});
$('.hiddenDiv').click(function()
{
$('.hiddenDiv').hide();
$("body").css("overflow", "auto");
});
});
</script
HTML:
<div class="masonryImage">
<img src="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="images/pic2.jpg" alt="">
</div>
</div>
So far it works with one picture, but when I'm adding another,
the new hidden text will overlay the first one, same with the pictures.
Is it because I'm using the same class ("masonryImage")?
Or isn't my Javascript removing the divs properly?
Many thanks.
Edit: CSS might be usefull:
.hiddenDiv {
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:900;
width:100%;
height:100%;
display:none;
overflow: scroll;
}
.masonryImage {
margin: 20px 20px 20px;
display: inline-block;
cursor: pointer;
}
here is how I modified your code :
DEMO
HTML
<div class="masonryImage">
<img src="..." alt="">
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="..." alt="">
</div>
</div>
</div>
I put the hiddenDiv inside the masonryImage so every masonryImage will have a custom hiddenDiv to show/hide.
JQUERY
$('.masonryImage').click(function()
{
if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
//alert('hiddenDiv is visible !');
$("body").css("overflow", "hidden");
}
else {
//alert('hiddenDiv is hidden !');
$("body").css("overflow", "auto");
}
});
You can just use .toogle() to show/hide the div. $(this) refers to the clicked masonryImage and .find('.hiddenDiv') to its child (you can also use .children('.hiddenDiv') ).
Then you can test if the clicked div is hidden or visible with .is(":visible"), to apply your body custom css :)
Hope I helped you.