jQuery Traversing and simple code? - javascript

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/

Related

Javascript height to impact content not just div

I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)

Setting Div position up on another content

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.

Mouseover overlay div stays positioned only with first result of loop

I have a script that overlays a div if you mouseover an image button.
This works great for one instance but if the results are more than one (in a mysql loop) the overlay box stays with the topmost result. How can I make this follow and jump down with each result listed instead of just the first one? If you mouseover each button down the list, it does popup but it's the positioning of the popup that won't move downwards.
I am sure this has to do with position: absolute vs. relative etc.. but when I change those, the script doesn't work anymore. Not sure if there is an alternative to this overlay feature?
The end result is that I have a list of results for a client to see. Each list has buttons where they can mouseover to see a note.
// divs that are in the loops...
<div style="float:left; position: relative;" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
<img style="padding:0 12px 0 12px;" src="/images/llm/button-account-notes.png">
<div id="child" class="areas_served_container shadow">
pop up content
</div>
</div>
// script that is in the footer
<script language="javascript">
function callMouseOver(){
document.getElementById("child").style.display = "inline";
}
function callMouseOut(){
document.getElementById("child").style.display = "none";
}
</script>
// style sheet for div that overlays
.areas_served_container {
display: none; position: absolute;
top:44px; left:94px;
z-index:999px;
width:350px; padding:20px;
}
You can't have more than one element with the same id. It have to be unique. Then you have to add parameter to you functions. But you should use jQuery instead of inventing a wheel.

How would I add a line under li items in my jquery menu?

I'm not really sure where to start on this, but I have a menu done in jquery. When you hover over right now, it does some fade in/out effects to the text, and links are manually handeled.
I wanted to add a simple line, maybe done in css? to go under each li a item when you are hovering as well, sliding to the li you hover over, not just appearing.
I just have no idea where to start with something like that, as I've never really done it before without an image (preferrably). It would of coarse need to start somewhere and move alone the ul and stop wherever it is when you leave the div with your mouse, and I'd like to keep it on when you click a link. I'm not asking anyone to make this for me though (unless you feel like it), just to get pointed on the right direction. I've seen some free codes with menus that do this, and attempted to use them, or model off them, but it woulnd't work with my menu.
Fiddle
I did this a while ago, maybe it is what you need. It will calculate the width of the anchor element you are hovering and grow an underliner element (a div) to both its width and position
//underliner
$('#menu a').hover(function(){
var position = $(this).position(); var width = $(this).width();
$('#underliner', '#menu').animate({width: width,left: position.left}, 200 );
});
$('#menu').hover(function(){
$('#underliner', '#menu').animate({opacity: 1}, 200).show();
}, function () {
$('#underliner', '#menu').animate({opacity: 0}, 200).hide();
});
CSS for the underline-element (change height and bg color as you seem fit)
#underliner {
display: none;
position: relative;
height: 5px;
line-height: 5px;
font-size: 1px;
background-color: #44c8f5;
width: 1px;
opacity: 0;
filter: alpha(opacity=0);
}
HTML
<div id="menu">
<ul>
list items with <a href>'s
</ul>
<div id="underliner"></div>
</div>
edit: I tried merging it with your code, but as you did not include the html, I had to guess how your 'navibar' was laid out. Anyway, try this fiddle: http://jsfiddle.net/c_kick/DuWcz/

query class toggle to change span background image not working

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');
});

Categories