Ok, I know enough about jQuery to get some of my tasks accomplished (well except this one apparently).
The situation:
I have an accordion menu that has plus and minus images that are shown in the left hand side of the menu. I want them to change when the child table is visible.
there is some bug in my code that won't allow this to happen. it will change to the minus when you click one of the options and it will change to the plus when you click another option.
The Problem:
Once an area is expanded the accordion class won't change if you click the visible option again to collapse the element.
Here is a jsfiddle demo
http://jsfiddle.net/mKUNs/
Here's a fixed version. But don't use it.
Your document is structured very badly. You've got tables with only one cell, and association between the header and the toggleable section is only by adjacency. You'd do better to change your markup so that each accordian is surrounded by a <div>/<section>.
Additionally, you're over using ids, and your CSS should all be taken out of the document. align="center" should not be used. Lastly, why muddle things by having a class for expanded and collapsed? The two are mutually exclusive, so just use one class!
This is how you should do it:
HTML
<div class='accordian'>
<h3><span class='icon'></span>Option 1</h3>
<div>
the box should be black now, if you click this option
again it should turn white
</div>
</div>
<div class='accordian' id='weekly'>
<h3><span class='icon'></span>Option 2</h3>
<div>
the box should be black now, if you click this option
again it should turn white
</div>
</div>
CSS:
.accordian h3 {
background-color:#689937;
color:#fff;
height:30px;
}
.accordian .icon {
background-color:#fff;
background-size:25px;
background-repeat: no-repeat;
height:25px;
width:25px;
padding-left:5px;
float:left;
}
.accordian.collapsed .icon {
background-color:#000;
}
jQuery
$('.accordian').each(function() {
var accordian = $(this);
var header = accordian.find('h3');
var content = accordian.find('div');
header.click(function() {
content.slideToggle('medium');
accordian.toggleClass('collapsed');
});
content.hide();
accordian.addClass('collapsed');
});
Related
Okay, before I ask this question. Let me explain my goal: I want to write as little code as possible, and still be able to have tons of functionality at the same time. I have coined this as 'beautiful code' to myself and colleagues.
Here's the problem: I want to click a box, and a panel to fade in with the desired content based on which box I clicked. Except that I cant use two classes and cannot re-use id's.
Here's the code: http://jsfiddle.net/2Yr67/
$('.maingrid').click(function(){
//'maingrid' fade out
//'panel' fade in with proper content
});
I had two ideas that would please me.
A) Have one panel fade in, and content fill into the panel based on which 'maingrid' box that was 'click'ed
B) Have a specific panel with the content fade in, based on which 'maingrid' was selected
I'm not asking for you to do it for me, simply push me towards the syntax needed to do what I want
Thanks in advance!
The first thing to do is to move your panel HTML elements closer to the maingrid elements. This allows you to hide/show the correct elements in order. Having all of the panels in their own separate element causes you to do DOM manipulation should shouldn't need to do. For simplicity, I put each panel right after the maingrid element that it was associated with it.
HTML Structure
<div class=".mainContainer">
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
</div>
I added the panel class to have the same CSS as maingrid, as well as make it invisible at the start:
.maingrid, .panel {
height: 345px;
width: 345px;
float: left;
/* [disabled]background-color: #000; */
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
overflow: hidden;
}
.panel{
display:none;
color:white;
}
This will fade out the current element clicked and fade in the next panel element.
$('.maingrid').click(function(){
var $that = $(this);
$(this).fadeOut(function(){ //This will wait until the fadeOut is done before attempting to fadeIn.
$that.next().fadeIn();
});
});
$('.panel').click(function(){
var $that = $(this);
$(this).fadeOut(function(){
$that.prev().fadeIn();
});
});
There also seems to be a bug where the hover does not show the text on the first hover event.
JSFiddle: http://jsfiddle.net/mDJfE/
I am learning jquery and java scripts but still not good enough with it . I am trying to make a toggle Effect but unable to make it happen . so I am asking here if this can be possible .
HERE is WHAT I what :
I have Two div inside a Div : Link for js Fiddle :http://jsfiddle.net/saifrahu28/zzju3/2/
What I am trying to make is : Firstly When the page loads the Blue Div should Display and Green should be hiding . And Whenever I click any of the 3 link inside he Blue Div Green Div Should appear and Blue Div Should Hide . And Same for the Green also , when clicking in the link in side the Green Div should Open Blue div and Hide the Green . Is this possible ?
Here is he Code:
HTML
<div style="width:300px; height:200px; background:#FFC;">
<div class="blueDiv">
<a>Click Me to Hide Blue Div 1</a>
<a>Click Me to Hide Blue Div 2</a>
<a>Click Me to Hide Blue Div 3</a>
</div>
<div class="GreenDiv">
<a>Click Me to Hide Green Div and Show Blue Div Div</a>
</div>
</div>
CSS
.blueDiv{
width:200px;
height:100px;
background:#09F;
}
.GreenDiv{
width:250px;
height:150px;
background:#0C9;
}
a{ text-decoration:none;
cursor:pointer;
font-size:10px;
}
$('a').click(function () {
$(this).parent().hide().siblings().show();
});
http://jsfiddle.net/Spokey/zzju3/4/
You could try this:
$(function(){
var blueDiv = $('.blueDiv');
var greenDiv = $('.GreenDiv').hide();
blueDiv.find('a').click(function(){
blueDiv.hide();
greenDiv.show();
});
greenDiv.find('a').click(function(){
greenDiv.hide();
blueDiv.show();
});
});
UPDATE: Added working JS Fiddle
http://jsfiddle.net/zzju3/3/
$('.blueDiv').click(function() {
$('.blueDiv').hide();
});
$('.GreenDiv').click(function() {
$('.GreenDiv').hide();
$('.blueDiv').show();
});
Here you go. The rest you can try around what you can do with it.
I'm not sure why you have three <a> tags in the bluediv but this should work. Be aware this $('a') selector grabs all anchor tags so this may cause issues with other parts of your code (if you have multiple anchor tags on the page). it may be worth adding a class to all the a tags you wish use for this functionality and then grabbing them like so $('.myAnchorClass')
$(document).ready(function(){
$('a').click(function(){ //Attach click event function to each anchor tag
if($(this).closest('div').hasClass('GreenDiv')){
$('.blueDiv').show();
} else {
$('.GreenDiv').show();
}
$(this).closest('div').hide();
});
});
I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.
For a js slider we're using a span "slider_link" to make the entire containing div into a clickable link. The issue is the first div seems to stay in place so the link never changes even when the slides do. We want the link for each slide to appear with that slide.
Demo of issue
HTML excerpt:
<div class="slider1">
<div class="slider-text slider-text1">
<span class="slider_link"></span>
<h1><span>Differentiate.</span> Shouldn't your recruitment firm stand out as much as you do.</h1>
<p>Human Resourcefulness is finding the right people, right now.</p>
</div>
</div>
CSS excerpt:
.slider_link {
float:left;
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index:inherit;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('../images/empty.gif');
}
Put relative positioning in the wrapper div!
I have a page filled with many fixed-size boxes in a grid layout (div's simply piled up with float:left). On hovering the mouse on any of them, a 'popup' - larger div with the same and also additional info is shown over it, as if the box expanded in all directions (but not moving the other boxes, it's shown also over them). Simplified html/css below. It's like thumbnails/full images, but the actual content is a pile of various html data, including links, etc.
The problem is that in this way the 'popup' div for the leftmost/rightmost boxes goes over the screen, triggering the scrollbar; or they are cut off if I don't allow the overflow.
I would like instead to reposition these popups to left/right so that they stay within the total borders. How to approach this need?
I can't do this server-side as the server does not know which boxes will be rightmost/leftmost - it depends on window size, how many columns will fit there. My first idea is to use javascript to change the positioning for all the popups right after the page is loaded, but I don't know how to a) find out which popups would be sticking out of the frame; and even b) find out the size of the popups, since they are hidden normally, which means width=height=0 until they are shown.
Perhaps a completely different approach of showing these popups would be easier than repositioning the div's that I currently have?
Currently Prototype/scriptaculous is used at some other pages, the server side is ruby on rails.
<div class="frame">
<div class="box", id="object123" >
small, fixed size content here
<div class="popup">
large, variable size/width/height content here that describes object123
</div>
</div>
<div class="box", id="object456" >
small, fixed size content here
<div class="popup">
large, variable size/width/height content here that describes object456
</div>
</div>
... many other similar boxes.
</div>
div.frame {
overflow: hidden;
}
div.box {
border:1px solid #efe9dc;
margin:5px;
position:relative;
float:left;
height:70px;
width:150px;
}
div.popup {
min-width:200px;
display:none;
position:absolute;
left:-30px;
top:-30px;
z-index:1000;
}
div.box:hover .popup { display: block; }
right now your div.popup is positioned absolute to div.box; if you removed the position from div.box and put it on div.frame, the popups would be absolute to the frame. you can then set left/top/right/bottom to be offset from the frame's edges instead.
i hope this helped :)
In the end this is what I did.
I replaced the popups with css+jquery script that expands the content box larger/above the normal grid; centers the 'popup' over the place of the original box, and if it goes over the sides, then adjusts the position.
As a bonus, the functionality works on everything that I tag with the 'expands' 'expand_show' 'expand_hide' classes, so no duplication as it is applied in several places.
sample html
<div class="box_grid expands">
<div class="box_content">
basic content that's always visible
<p class="expand_hide>short content summary shown in the small boxes</p>
<p class="expand_show> detailed content</p>
<div class="expand_show> detailed extra content</div>
</div>
</div>
css and javascript to show it
div.box_grid {
margin:5px;
float:left;
height:80px;
width:170px;
}
div.expanded { position:relative; }
div.expanded > * {
position:absolute;
width:auto;
height:auto;
z-index:1000;
min-width:100%;
min-height:100%;
}
div.expands .expand_show { display:none; }
div.expanded .expand_show { display: block; }
div.expanded .expand_hide { display: none; }
$(document).ready(function(){
$('.expands').hover(
function(){
grid = $(this);
expanded = grid.children();
border = $('.content_borders');
grid.addClass('expanded');
var top = (grid.outerHeight() - expanded.outerHeight())/2;
var left = (grid.outerWidth() - expanded.outerWidth())/2;
var left_limit = border.offset().left + 5 - grid.offset().left;
var right_limit = border.offset().left + border.outerWidth() - expanded.outerWidth() - 5 - grid.offset().left;
var bottom_limit = border.offset().top + border.outerHeight() - expanded.outerHeight() - 5 - grid.offset().top;
if (left < left_limit) { left = left_limit }
if (left > right_limit) { left = right_limit }
if (top > bottom_limit) { top = bottom_limit }
expanded.css('top',top);
expanded.css('left',left);
},
function(){ $(this).removeClass('expanded') }
);
});
As my understanding you have multiple small divs which ave the thumbnails and you have a div to sow large content for each image.
So for each image there are two divs.
Tats why you are having difficulty for each div.some will be left , some center , some on right.
Instead of that , use a common div to show large content for all the smaller div.
Pass a parameter on hover and show the content in that div using server side code.
That means your style is fine , you just position only one div in center by using
left:100px
top:100px
you modify it as you want. Put large content in that single div for all smaller divs
Use Firefox Firebug for better understanding of position