I am trying to equalize "row" hights of a project I am working on and am running into speed issues. I have 60 to 90 rows and 4 to 10 columns. This whole setup cannot be generated in a real table due to other requirements so I have been using the jQuery.equalhights plugin, which works great, but when you get to 240 "cells" it takes about 5 seconds to finish on IE7 & 8 (FF and other modern browsers are fast)
So is there a faster way to do this then looping though every div in the row and recording the tallest then setting the hight on all the divs to the tallest hight?
Example HTML. I need all *row-# divs to be equal height to the all other *row-#.
So the height of label-row-0 = item-1-row0 = item-2-row-0 = item-3-row-0 = item-4-row-0 and the max height in this happens to be item-2-row-0
<div style="float: left">
<div id="label-row-0">label</div>
<div id="label-row-1">label</div>
<div id="label-row-2">label</div>
<div id="label-row-3">label</div>
</div>
<ul style="margin: 0; padding: 0; list-style: none; float: left;">
<li>
<div id="item-1-row-0">bla</div>
<div id="item-1-row-1">bla<br/>bla</div>
<div id="item-1-row-2">bla<br/>bla</div>
<div id="item-1-row-3">bla<br/>blabla<br/>blabla<br/>bla</div>
</li>
<li>
<div id="item-2-row-0">bla<br/>blabla<br/>bla</div>
<div id="item-2-row-1">bla</div>
<div id="item-2-row-2">bla bla bla</div>
<div id="item-2-row-3">bla<br/>bla</div>
</li>
<li>
<div id="item-3-row-0">bla</div>
<div id="item-3-row-1">bla</div>
<div id="item-3-row-2">bla</div>
<div id="item-3-row-3">bla</div>
</li>
<li>
<div id="item-4-row-0">blabl;a bhdks</div>
<div id="item-4-row-1">fvhsdjk vbhsdivbsibn ikvjchwib</div>
<div id="item-4-row-2">gfwei bcvieufhci bwuued</div>
<div id="item-4-row-3">fgbuisdk bnib cieuh9b</div>
</li>
</ul>
The li elements are sortable via jQuery UI and need to be allowed to horizontally scroll while keeping the label div fixed in-place. I am basically building a column centric table that has a locked column and locked header and it needs to be column sortable, which I have found no way to do with a regular table or existing jQuery plugins
Check http://www.ejeliot.com/blog/61
As I can only supply 1 link per post, here is another link: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks.
Related
I have a list which contains of several items that are hidden.
In my JS i want a function that changes the items of this list so it becomes visible. I want each item to become visible if a certain event has happened. The event is working fine and can be considered as shakeCount= 6, to test it properly.
Here is my list:
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
What i tried so far and didn't work:
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").style.visibility ="visible";
}
Thanks in advance!
Have you tried using Toggle? I would recommend it but you may need to remove the "hidden" class from your elements and add in the style="display: none;" attribute to each in order to default them to hidden.
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").toggle();
}
First, you're using getElementbyId -- it should be getElementById (missing capital 'B').
Second, you've made the #shake links visibility:hidden, but you are targeting the wrapping div when you run your js.
var shakeCount = 6;
if (shakeCount>5)
document.getElementById("s1").style.visibility ="visible";
.hidden {visibility: hidden;}
<div class="container">
<div class="list-group">
<div id="s1" class="list-group-item hidden"><a href="#shake1" >Shake1</a></div>
<div id="s2" class="list-group-item hidden"><a href="#shake2" >Shake2</a></div>
<div id="s3" class="list-group-item hidden"><a href="#shake3" >Shake3</a></div>
</div>
</div>
The above code hides the wrapping div elements instead of the links so that they are shown when the js runs.
So I have a few tabs. There can be multiple tabs, but I currently have 3. What I am trying to do is to change the styling of the tab when it is clicked and the other tabs to have some other styling. My code is as follows:
<div id="ClaimTabs" class="TabbedPanels">
<div class="TabbedPanelsTabGroup">
<div id="list1" class="TabbedPanelsTab TabbedPanelsTabSelected">
<a id="anchor1" class="TabbedPanelAnchor" href="javascript:showTab(1);">Tab 1 </a>
</div>
<div id="list2" class="TabbedPanelsTab">
<a id="anchor2" href="javascript:showTab(2);" >Tab 2</a>
</div>
<div id="list3" class="TabbedPanelsTab">
<a id="anchor3" href="javascript:showTab(3);">Tab 3</a>
</div>
</div>
<div id="ClaimContent" class="TabbedPanelsContentGroup">
<div id="tab1" class="TabbedPanelsContent TabbedPanelsContentVisible" style="display: block;">
Screen 1
</div>
<div id="tab2" class="TabbedPanelsContent" style="display: none;">
Screen 2
</div>
<div id="tab3" class="TabbedPanelsContent" style="display: none;">
Screen 3
</div>
</div>
</div>
My script that manipulates the styling is as follows:
function showTab(tabNumber) {
var children = document.getElementById('TabbedPanelsTabGroup').childNodes;
document.getElementById('tab'.concat(tabNumber)).style.display = 'block';
document.getElementById('list'.concat(tabNumber)).setAttribute("class", "TabbedPanelsTab TabbedPanelsTabSelected");
document.getElementById('anchor'.concat(tabNumber)).setAttribute("class", "TabbedPanelAnchor");
for(i=1; i <= children.length ; i++)
{
if(i != tabNumber){
document.getElementById('tab'.concat(i)).style.display = 'none';
document.getElementById('list'.concat(i)).setAttribute("class", "TabbedPanelsTab");
document.getElementById('anchor'.concat(i)).setAttribute("class", "");
}
}
}
I was wondering if my logic is right. I am concatenating the tab, list and anchor with the number and updating styles. But this does not seem to be working.
You appear to have at least two problems here.
First, you're trying to use document.getElementById for TabbedPanelsTabGroup, but that's a class.
Second, you're using .childNodes when you are probably looking for .children. .childNodes includes all child nodes, including the text inside the tags (which is a node). So when you use that number to loop over it, your loop isn't counting to 3 (your # of divs), it's counting to 7, and that's giving errors.
But, .children isn't supported before IE9, so like others have suggested, you may want to consider jQuery to get at that with better support.
With plain JavaScript I would recommend EventListener:
<div id="elem"> "some content here" </div>
var elem = document.getElementById('elem');
elem.addEventListener ('click', show, false);
function show() {
//add css Class
var element = document.getElementById("elem");
element.classList.add("activeTab");
}
But as mentioned in the comment, jQuery is perfect for that kind of things.
best
M
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
I am working on a page for my portfolio website that displays various services. There's a large box in the center column of three columns. On the left and right of the central box are columns of 3 boxes each. Each box is a clickable link that then changes the content in the central block.
I'm trying to make the boxes on the sides of the central box grow in height on mouseover and shrink on mouseout using jQuery .animate().
My problem is that the boxes are very spastic. When you mouseout of one and go to another sometimes it will shrink and then grow and then shrink again. How can I force them to stop growing and shrinking a 2nd time?
Here's the link to the page in question: http://www.nukamedia.com/beta/services.html
Here's the jQuery code:
var classes = ".how-it-works, .built-for-power, .done-on-time, .inform-your-customers, .spread-the-word, .keep-in-contact";
$(classes).on("mouseover", function() {
$(this).animate({height: '+=20px'},500);
});
$(classes).on("mouseout", function() {
$(this).animate({height: '-=20px'},500);
});
Here's the HTML Markup:
<div class="services-content container">
<div class="row">
<div class="left-control-squares twocol">
<div class="how-it-works box-defaults">
Learn<br/>
How It<br/>
<span>Works</span>
</div>
<div class="built-for-power box-defaults box-text-align">
Built For<br/>
<span>Power</span>
</div>
<div class="done-on-time box-defaults box-text-align">
Done On<br/>
<span>Time</span>
</div>
</div>
<div class="eightcol" id="content-square">
<img src="images/click-to-learn.png" />
</div>
<div class="right-control-squares twocol last">
<div class="inform-your-customers box-defaults">
Inform<br/>
Your<br/>
<span>Customers</span>
</div>
<div class="spread-the-word box-defaults box-text-align">
Spread The<br/>
<span>Word</span>
</div>
<div class="keep-in-contact box-defaults box-text-align">
Keep In<br/>
<span>Contact</span>
</div>
</div>
</div>
</div>
You should consider using the jQuery stop() function. This will stop the animation in its tracks.
$("#myelm").stop().animate({height : "300px"});
I am having left side pane and right side pane. I want to deal with two scenarios
When I click the list(li) on right side that want add on left side(`initially left side pane is empty) and remove from right side.
Reverse part of first one. When i click the added li in left side that need to be remove from the left side and added to the right side.
I did the first scenario like below
<div class="left_pane">
<div class="content_left_pane">
<ul data-role="listview" id="left_side_ul">
</ul>
</div>
</div>
<div class="right_pane">
<ul data-role="listview" id="right_side_ul">
<li class="showDetails" id="account-1" onclick="selected_destination($(this).attr('id'))">
<div class="ui-grid-b">
<div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div>
<div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div>
<div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div>
</div>
</li>
</ul>
</div>
<script>
function selected_destination(id){
$("#right_side_ul li#"+id+"").clone().prependTo("div.content_left_pane ul#left_side_ul");
$("#right_side_ul li#"+id+"").remove();
}
</script>
I don't have any clue to do the second part. Because in the first part i am sending the current li id in onclick function. But in the reverse part, in the left pane i am having ul only so i don't know how to do the second scenario.
I suggest you to not register onclick handler directly in html code. As you are using jQuery, this scenario should work for you:
HTML:
<div class="left_pane">
<div class="content_left_pane">
<ul data-role="listview" id="left_side_ul">
</ul>
</div>
</div>
<div class="right_pane">
<ul data-role="listview" id="right_side_ul">
<li class="showDetails" id="account-1">
<div class="ui-grid-b">
<div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div>
<div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div>
<div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div>
</div>
</li>
</ul>
</div>
JavaScript:
$(document).ready(function(){
$('#right_side_ul li').live('click', function(){
$(this).appendTo('#left_side_ul');
});
$('#left_side_ul li').live('click', function(){
$(this).appendTo('#right_side_ul');
});
});
Please note, that I'm using live() here because LI elements are dinamically added to the UL.
As you can see, javascript code for both right and left panes are almost the same, so you may optimize my solution by combining them into one