I have a carousel on my homepage. When the third carousel appears, the carousel buttons div class="rotator-controls" move down due to the image taking space. My goal here is to keep this div the same height as the other 4. Which means that when the <span> (index 2) of the grandchild div <div class="rotator-pagination"> is active, I apply the correct css to the <div class="rotator-controls"> (e.g. bottom:60px). As the carousel is jQuery cycle 2, when the span is active it has the class cycle-pager-active.
I have tried using domcontentloaded. i.e.
document.addEventListener("DOMContentLoaded", function() {
var span = document.querySelector("#homepage-rotator > div.banner.cycle-slide.cycle-slide-active > div > div.banner-content-area > div.rotator-controls > div.rotator-pagination").children[2];
if (jQuery(span).hasClass("cycle-pager-active")){
var grandPDiv = document.querySelector("div.rotator-controls");
grandPDiv.style.bottom = "-60px";
}
});
This does not work. But if I do this in the console, and wait for the 3rd carousel to be acitve, using jQuery(span).hasClass("cycle-pager-active") returns true.
How do i apply css (to its grandparent element) only when the span element is active?
Try this
.banner-content-area {
min-height: 440px;
}
if not work then add min-height: 440px!important;
This works perfectly:
.banner-content-area {
min-height: 440px;
}
Related
JSFiddle: http://jsfiddle.net/ncuacvcu/
DIV home is displayed by default.
When I click on LINK one/LINK two, DIV one/DIV two replaces DIV home. When I click on LINK one/LINK two again, DIV one/DIV two toggles shut, leaving an empty white space. How do I get DIV home to display again at that moment?
At the same time, if DIV one is open and I click on LINK two, I want DIV one to be replaced by DIV two (i.e. without going through DIV home).
Here's what I tried (and some variations), but I can't get it to work:
$("a#one_toggle").click(function()
{
$(".hideall").not(".one").slideUp();
$(".one")slideToggle(function(){
if($('#client1').is(':visible')){
$('#client0').SlideUp();
} else{
$('#client0').SlideDown();
}
});
});
Thanks in advance for any tips!
You need to use the callback of slideToggle and check if the div with class home is visible or not then you show it.
http://api.jquery.com/slidetoggle/
http://api.jquery.com/is/
$(function() {
$("a#one_toggle").click(function() {
$(".hideall").not(".one").slideUp();
$(".one").slideToggle('slow', function() {
showHome($('.one'));
});
});
$("a#two_toggle").click(function() {
$(".hideall").not(".two").slideUp();
$(".two").slideToggle('slow', function() {
showHome($('.two'));
});
});
});
function showHome(elementToCheck) {
// now we know if the div to check is visible or not
if (!$(elementToCheck).is(':visible')) {
// the div is not visible so we show it
$('.home').slideDown();
}
}
.one,
.two {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
link one
link two
<div class="home hideall">
home
</div>
<div class="one hideall">
one
</div>
<div class="two hideall">
two
</div>
Well, i am stucked and can't find the answer myself. Hopefully someone can give me a hint.
I try to fullfill the following requirements:
There should be a Newsblock within a HTML Page with a fixed width and
height.
In this Newsblock only the title of the news are visible.
Those news are "collapsed" by default and should "expand" if the Mouse is over it.
Due the fact that the 'Newsblock' is limited by its height, there should be a Scrollbar visible. But only if the currently expanded news makes it necessary, so the user can Scroll down.
Newstitle and Newstext should never leave the Newsblock.
so far so good, i was able to fullfill all those demands except the one with the Scrollbar. If i try to reach the Scrollbar out of the currently expanded news it collapses again and the Scrollbar disappears. I understand that my .hover is configured that it always SlideUp if i leave the newsentry and the Scrollbar isn't a part of the newsentry div. But i have no idea what to change to still have an overall Scrollbar for the Newsblock, but won't disappear if i try to 'reach' it.
P.s.: A Scrollbar only per Newsentry looks weird. Thats why i want 'bind' the scrollbar to the parent container :S
HTML
<div id="newsblock">
<div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
<div class="newsentry">
<div class="newstitle">...</div>
<div class="newstext">...</div>
</div>
... another 9 'newsentry' divs.
</div>
</div>
JS
$(".newsentry").hover(
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
CSS
.newsblock {
height: 200px;
overflow-y: auto;
}
Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock.
The scrollbar being part of #newsblock, the entry isn't closed anymore when you go on it.
EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.
Here is a working example:
var $newsblock = $("#newsblock");
function closeAllNews(slideUpArgs){
return $(".newstext").stop(true).slideUp(slideUpArgs);
}
function openNews(news, slideDownArgs){
$(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}
function ensureNewsTopVisible(news){
// Check if the top of the newsentry is visible...
var top = $(news).position().top;
if(top < 0){
// ...and if not, scroll newsblock accordingly.
$newsblock.scrollTop($newsblock.scrollTop() + top);
}
}
$(".newsentry").each(function(){
var $this = $(this);
// When the mouse enter a news entry...
$this.on("mouseenter", function(){
// ...close all opened entries (normally there is at most one)...
closeAllNews({
// (while making sure that the top of this entry remains visible
// at each step)
step: ensureNewsTopVisible.bind(null, $this)
});
// ...open this newsentry.
openNews($this);
});
});
// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);
.newstitle {
font-size: 2em;
}
.newstext {
display: none;
}
#newsblock {
max-height: 150px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newsblock">
<div>
<div class="newsentry">
<div class="newstitle">News 1</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 2</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 3</div>
<div class="newstext"></div>
</div>
<!-- Etc. -->
</div>
</div>
<!-- Ignore the script below. It is just filling in the news' text. -->
<script>
$(".newstext").each(function(i, newstext){
$.get("http://baconipsum.com/api/?type=meat-and-filler&format=html¶s=5&num=" + i)
.then(function(ipsumHtml){
$(newstext).html(ipsumHtml);
});
});
</script>
Try this:
$(".newsentry, .newsblock").hover( // <-- changed
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
This makes sure the block stays open when you hover either over the header or the block itself.
Is that what you mean?
There would be a joke , if i am wrong .. what i thing just change your css as
/* not .newsblock **/
#newsblock {
height: 200px;
overflow-y: scroll;/* not auto*/
}
It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.
$(".newsentry").click(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
}
);
Or use the below one to go with hover.
$(".newsentry").hover(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
},
function(){}
);
This will not close the news text block until you accidentally hover over another news entry.
How to add and remove class with the condition of CSS display. For example, I have some Div that can be hidden and shown. I want that, if the div is hidden with the display:none;, then the class of the div is removed.
But if the div is shown with the display:block;, I want to add a class to the div.
Here is what I have been trying:
$(document).ready(function(){
if($('.bigPicture').css('display') == 'block')
{$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');};
if($('.bigPicture').css('display') == 'none')
{$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');}
});
EXPLANATION
I have multiple slideshows in one pages. Not all of the slideshow is going to be shown in the page, one of them will only show if the link to that slideshow is clicked. It sames like auto hide and show function. If one slideshow is shown, then other slideshows are hidden.
Each slideshow has their own thumbnails to control them.
The problem is all of the slideshow has no ID and has the same class, while all the slideshow is run with the same script.
If the thumbnail in the second slideshow I click, the slideshow doesn't move. And I realize it slides only the first slideshow.
SO, the solution is I have to remove the class of the slideshow.
Try is visible:
$(document).ready(function(){
if($('.bigPicture').is(':visible')){
$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');
} else {
$('.bigPicture').find('div').removeClass('easyzoom');
}
});
This is what you are trying to do?
If so, it's easy to convert it to jquery syntax instead.
It would be easier if you had provided a jsFiddle of your problem.
CSS
.bigPicture {
width: 50px;
height: 20px;
border-style: solid;
border-width: 2px;
}
.hidden {
display: none;
}
.easyzoom {
background-color: red;
}
HTML
<div class="bigPicture">
<div>One</div>
</div>
<div class="bigPicture hidden">
<div class="easyzoom easyzoom--overlay">Two</div>
</div>
<div class="bigPicture hidden">
<div class="easyzoom easyzoom--overlay">Three</div>
</div>
Javascript
document.addEventListener('load', function () {
Array.prototype.forEach.call(document.querySelectorAll('.bigPicture'), function (bigPicture) {
var div = bigPicture.querySelector('div:first-of-type');
if (div) {
if (window.getComputedStyle(bigPicture).display === 'none') {
div.classList.remove('easyzoom', 'easyzoom--overlay');
} else {
div.classList.add('easyzoom', 'easyzoom--overlay');
}
}
});
}, true);
On jsFiddle
I think your code is somewhat working. Here is a fiddle where I have shown and hidden on the click of the buttons.
Code Snippet:
$(document).on('click','#addBigPicture',function(){
$('.bigPicture').css('display','block');
if($('.bigPicture').css('display') == 'block')
{$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');};
});
$(document).on('click','#hideBigPicture',function(){
$('.bigPicture').css('display','none');
if($('.bigPicture').css('display') == 'none')
{$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');}
});
The if loops are as desired by you. Hope it helps!!
I've got this problem :
I have got 6 "outer" div's each have a img tag inside.
Following each 6 div's are another div with content for each 6 divs
I want when i click one "outer" div hide all outer div's and show me the next div content.
This is the function. Wich it works there http://jsfiddle.net/Weinz/jdFRw/4/
But on test site only hide .outerDiv doesn't show next .innerDiv
$(function() {
$(".outerDiv").click(function() {
$(".outerDiv").hide();
$(".innerDiv").hide();
$(this).next("div").show();
});
$(".innerDiv").click(function() {
$(".outerDiv").show();
$(".innerDiv").hide();
});
});
The real html code is this
<div class="block outerDiv"><img src="images/placeholder.jpg" width="165" height="74" alt="Temp" /></div>
<div class="container innerDiv" style="display:none;">
I think the problem is on .next but i try diferent options and nothing work.
If i don't set the display in the innerDiv it works...
Try this
$(function() {
$(".outerDiv").click(function() {
$(".outerDiv").hide();
$(".innerDiv").hide();
$(this).next("div").show().css('display', 'block');
});
$(".innerDiv").click(function() {
$(".outerDiv").show();
$(".innerDiv").hide();
});
});
I am currently building a menu bar that consists of icons that show a contextual submenu when hovered over. Essentially, when hovering over an icon a popup menu/tooltip appears (with more options), but the icon itself should be clickable as well.
So far, I use the following HTML construct and jQuery for each menu item:
<div id="profile" class="menu-item">
<div id="profile-tip" class="tip">
**insert profile menu options**
</div>
</div>
<div id="search" class="menu-item">
<div id="search-tip" class="tip">
**insert search menu options**
</div>
</div>
and
$(".menu-item").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
What I wish to do is to change the HTML to look as follows (so I can apply an onClick link to the "profiles" div):
<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
<div id="profile-tip" class="tip">
**insert menu options**
</div>
However, I don't know how to modify the jQuery to find the matching div to display when hovered over. The associated tooltip/popup menu div will always be xxxx-tip (where xxx is the name of the parent div).
As an example, I imagine it will look something like this (keep in mind I know very little about jQuery so I'm well aware this will look stupid):
$(".menu-item").hover(function() {
$.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$.find("div").attr('id'+"-tip").hide();
});
});
To summarise: I need the jQuery modified to show the div based on the parent div's ID + the string "-tip"
Hopefully that isn't too confusing. Any help GREATLY appreciated :)
Not sure I understand completely what you want, but maybe try something a little more like this:
$(".menu-item").hover(
function() {
$(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$(this).find(".tip").hide();
}
);
Edit: If the tip element is not a child of the menu item div, this could work:
$(".menu-item").hover(
function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);
Instead of finding the name of the div in the PARENT of the thing you're hovered over, use jQuery to find the tooltip that is a CHILD of the thing you're hovered over...search down the DOM, instead of UP.
Use jQuery's $(this) operator...
$('.menu-item').hover(function(){
$(this).find('.tip).fadeIn();
},
function() {
$(this).find('.tip).fadeOut();
});
I'm not 100% clear on the goal here but you can get your div by ID as shown here:
$(".menu-item").hover(function()
{
$(this).find(".tip").fadeIn("fast").show();
});
Or in CSS:
.menu-item .tip
{
display: none;
}
.menu-item .tip:hover,
.menu-item:hover .tip
{
display: auto;
}