Date Show Different Text

[leif]

Hi there! I found a jquery code that works quite well in .htm files etc. 

<style>
.DateRange, .DateDiv { display: none; }
</style>
<script>
jQuery.noConflict();
$(function() {
$(".DateDiv").each(function(index) {
var sRange = $(this).find(".DateRange").html();
var arrTemp = sRange.split(" to ");
var dtFrom = new Date(arrTemp[0]);
var dtTo = new Date(arrTemp[1]);
var dtNow = new Date();
if (dtNow >= dtFrom && dtNow <= dtTo)
$(this).show();
});
});
</script>
<b>t<div class="DateDiv"><span class="DateRange">3/14/2013 to 5/15/2013</span>spring 2023</div>
<div class="DateDiv"><span class="DateRange">5/15/2013 to 6/15/2013</span>summer 2023</div>
<div class="DateDiv"><span class="DateRange">6/15/2013 to 7/15/2013</span>winter 2023</div>
<div class="DateDiv"><span class="DateRange">7/15/2013 to 8/15/2013</span>winter 2024</div>
<div class="DateDiv"><span class="DateRange">8/15/2013 to 10/15/2013</span>spring 2024</div>
<div class="DateDiv"><span class="DateRange">10/15/2013 to 11/15/2013</span>summer 2024</div>
<div class="DateDiv"><span class="DateRange">11/15/2013 to 12/15/2013</span>winter 2024</div>
<div class="DateDiv"><span class="DateRange">12/15/2013 to 1/15/2014</span>winter 2025</div>
<div class="DateDiv"><span class="DateRange">1/15/2014 to 3/15/2014</span>spring 2025</div>
<div class="DateDiv"><span class="DateRange">3/15/2014 to 5/15/2014</span>summer 2025</div>
<div class="DateDiv"><span class="DateRange">5/15/2014 to 6/15/2014</span>winter 2025</div>
<div class="DateDiv"><span class="DateRange">6/15/2014 to 7/15/2014</span>winter 2026</div>
<div class="DateDiv"><span class="DateRange">7/15/2014 to 9/15/2014</span>spring 2026</div>
<div class="DateDiv"><span class="DateRange">9/15/2014 to 10/15/2014</span>summer 2026</div>
<div class="DateDiv"><span class="DateRange">10/15/2014 to 11/15/2014</span>winter 2026</div>
<div class="DateDiv"><span class="DateRange">11/15/2014 to 12/15/2014</span>winter 2027</div>
<div class="DateDiv"><span class="DateRange">12/15/2014 to 2/15/2015</span>spring 2027</div>

However, we're trying to use it WITHIN a jquery toggle table, but it doesn't work inside a table with other jquery. Does anyone have any to write it differently without using jquery or someting we can place anywhere?

[Tumbleweed]

Have you tried moving the jquery part below your table?  You are on V5 correct or is this a v4 forum? If V5, is the table a plug-in or are you adding via your headers/footers?

It very well could be this bit... $(this).show();

...as it wouldn't surprise me if the other code is using that as well. Give me a little more detail regarding V5 or not, plugin or not, so we (I) know if we (I) can help or not and a link may also be helpful. Thanks.

 

[leif]

Not entirely sure. Tried moving below table. Issue persists: view-source:http://firewhiskeyandcoke.proboards.com/index.cgi

[Tumbleweed]

I'm going to remove your coding as it isn't necessary, since you provided your link. Just makes for less scrolling to read. First with the good news, I got it to work in the tabbed table and the tabs are working just with the following fixes.

But first, Can you tell me how your page is supposed to look. Like are the crests (Ravenclaw, Hufflepuff, etc) supposed to be on the left in a fixed position and then your tabbed table in a fixed position on the right?

Then above your forum would first be the banner, the little sub-title thing and then your menu (which is stacked in IE, btw), then your cbox. I think that is how you want it so I'll just continue with my suggestions.

First, I have found when I want something on the right it is best put in your footers. So move that tabbed table to your footers and below the javascript that goes with the tabbed table.

Now can we fix some of your css so it works in IE? I'll assume the answer is yes.

First of all, look at this bit of css:

.bannerthing {
position: fixed;
left: 10px; top: 0px;
width: 400px;
border-left: 0px;
border-top: 0px;
height: 100%;
left: 10px;
top: 90px;
width: 400px;
height: 100%;
border-left: 0px;
border-top: 0px;
z-index: -1;
margin-right:5px;
opacity: 0.8;
margin-top: -60px;
opacity: 0.7;
}

You have things duplicated and conflicting plus you need to add a bit for IE (in blue) so that bit should look like this: (The bolded 0 in there should match whatever you set the top for other browsers (bolded as well)

.bannerthing {
position: fixed;
top: 0px;
left: 10px;
width: 400px;
height: 100%;
z-index: -1;
opacity: 0.8;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

If you need that adjusted a bit let me know and I'll tell ya the proper way to do it.


Now to fix the right side tab table for IE. Notice how the bolded parts match for IE and other browsers:


.rainbowdash {
position: fixed;
top: 50;
right: 20;
z-index: 4;
background: #0d0d0d;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
padding: 1px;
border: 1px solid #111;
_position:absolute;
_top:expression(50+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
_right:expression(20+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');
}


Once you do that, lets see how things look.