Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1065 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Hide and Show a Div Using Javascript

Thread title: Hide and Show a Div Using Javascript
Reply    
    Thread tools Search this thread Display Modes  
11-24-2008, 08:37 PM
#1
Verayer is offline Verayer
Status: Member
Join date: Oct 2006
Location:
Expertise:
Software:
 
Posts: 151
iTrader: 1 / 100%
 

Verayer is on a distinguished road

  Old  Hide and Show a Div Using Javascript

Hi; I'm using the following javascript:

Code:
<script language="JavaScript">   
    function feat1() {
	  document.getElementById("featdisplay1").style.display = "block"
         document.getElementById("featdisplay2").style.display = "none";
  document.getElementById("featdisplay3").style.display = "none";
  document.getElementById("featdisplay4").style.display = "none"

}
function feat2() {
	  document.getElementById("featdisplay2").style.display = "block"
         document.getElementById("featdisplay1").style.display = "none";
  document.getElementById("featdisplay3").style.display = "none";
  document.getElementById("featdisplay4").style.display = "none"

}
function feat3() {
	  document.getElementById("featdisplay3").style.display = "block"
         document.getElementById("featdisplay2").style.display = "none";
  document.getElementById("featdisplay1").style.display = "none";
  	  document.getElementById("featdisplay4").style.display = "none"


}
function feat4() {
	  document.getElementById("featdisplay4").style.display = "block"
         document.getElementById("featdisplay2").style.display = "none";
  document.getElementById("featdisplay3").style.display = "none";
    document.getElementById("featdisplay1").style.display = "none";


}
</script>
my html code:
<div><p><a href="javascript:feat1();" >Donec </a></p></div>
<div id="featdisplay1">...</div>

<div><p><a href="javascript:feat2();" >Donec </a></p></div>
<div id="featdisplay2">...</div>

<div><p><a href="javascript:feat3();" >Donec </a></p></div>
<div id="featdisplay3">...</div>

<div><p><a href="javascript:feat4();" >Donec </a></p></div>
<div id="featdisplay4">...</div>

This works perfect in IE, but in Firefox he does not want to click the first link and I can only click each link once. (same for safari)

Does anyone know a solution for this,
thanks in advance

Reply With Quote
04-04-2009, 06:17 PM
#2
hijax is offline hijax
Status: Junior Member
Join date: Apr 2009
Location:
Expertise:
Software:
 
Posts: 32
iTrader: 1 / 100%
 

hijax is on a distinguished road

  Old

Why on earth would anyone still be using Javascript for this kind of thing.

I type 4-5 lines of code in Jquery and I get the same results.

$(document).ready(function () {
$('.div').click(function () {
$('ul.div').slideToggle('slow');
});
});

Reply With Quote
04-09-2009, 01:26 PM
#3
alexleeds is offline alexleeds
Status: Junior Member
Join date: Mar 2009
Location: South Florida
Expertise:
Software:
 
Posts: 93
iTrader: 1 / 100%
 

alexleeds is on a distinguished road

Send a message via AIM to alexleeds Send a message via MSN to alexleeds Send a message via Skype™ to alexleeds

  Old

@hijax, JQUERY is JAVASCRIPT!!!!! So yes, people still do use JAVASCRIPT for this sorta thing !!

Also try this instad of using a hacked link:

<div><span onclick="feat1();">Donec</span></div>

or if you need to use the <p> or <a>

<div><p onclick="feat1();"><a>Donec</a></p></div>

edit: its a better method since if javascript is disabled, you still can have a <a> href to reload the page with the box shown or something

Reply With Quote
04-09-2009, 10:07 PM
#4
Choco is offline Choco
Status: Member
Join date: Jul 2007
Location: USA
Expertise:
Software:
 
Posts: 240
iTrader: 2 / 100%
 

Choco is on a distinguished road

Send a message via MSN to Choco

  Old

Originally Posted by hijax View Post
Why on earth would anyone still be using Javascript for this kind of thing.

I type 4-5 lines of code in Jquery and I get the same results.

$(document).ready(function () {
$('.div').click(function () {
$('ul.div').slideToggle('slow');
});
});
Oh, great idea. Why not include the kilobytes and kilobytes of code that jQuery is for a simple code like that.

People still use pure, library-less javascript over jQuery due to load times. The load time you saved from those couple of lines of code is now eaten up by a giant library between your head tags.

Reply With Quote
04-09-2009, 10:16 PM
#5
mjwalsh is offline mjwalsh
mjwalsh's Avatar
Status: I love this place
Join date: Dec 2007
Location:
Expertise: Programming - Sys Admin
Software: Dreamweaver - Notepad++
 
Posts: 638
iTrader: 14 / 100%
 

mjwalsh is on a distinguished road

  Old

You could always just do it with some CSS code and take up way less loading =/

Reply With Quote
04-09-2009, 10:55 PM
#6
hijax is offline hijax
Status: Junior Member
Join date: Apr 2009
Location:
Expertise:
Software:
 
Posts: 32
iTrader: 1 / 100%
 

hijax is on a distinguished road

  Old

I understand what you mean about less kilobytes and loading faster. However, using jquery will not make it slower.... how much time we talking about here? 2-5seconds? And that's a maybe.

More Companies and professional websites are turning to Jquery.

Dojo is similiar to Jquery but it has wayyyy to much file size. So I would understand if he were using it.

Sorry but using jQuery will not make it so slow, that you can tell the difference visually btw JavaScript.

It's your choice I respect that.

Reply With Quote
04-10-2009, 01:54 AM
#7
alexleeds is offline alexleeds
Status: Junior Member
Join date: Mar 2009
Location: South Florida
Expertise:
Software:
 
Posts: 93
iTrader: 1 / 100%
 

alexleeds is on a distinguished road

Send a message via AIM to alexleeds Send a message via MSN to alexleeds Send a message via Skype™ to alexleeds

  Old

well, jquery is 19kb, and yes today that isnt that big, with all the high spped internet. although you have to take in consideration theres till a lot using dialup. its really a preference, for somehting this small i would definetly not use jquery, although, if your really stuggling with figuring out how to do it, you cna always take a looky at jquery source and see how they do it

Reply With Quote
04-16-2009, 05:41 AM
#8
cjbrowne is offline cjbrowne
Status: I'm new around here
Join date: Mar 2009
Location: Australia
Expertise:
Software:
 
Posts: 3
iTrader: 0 / 0%
 

cjbrowne is on a distinguished road

  Old

2 - 5 seconds is massive in terms of page load times, and I definately wouldn't want people waiting for the jquery libraries to load unless I was using them extensively throughout my site.

There's a lot to be said for hand-coding features in Javascript. If we all rely on using jquery for every little effect we want, then who's going to be around still with the javascript skills needed for creating better alternatives to jquery in the future? I'd like to think that people who use jquery can still write their own javascript and understand why jquery works (or doesn't), and how to customise jquery for their own purposes.

Reply With Quote
04-16-2009, 07:17 PM
#9
hijax is offline hijax
Status: Junior Member
Join date: Apr 2009
Location:
Expertise:
Software:
 
Posts: 32
iTrader: 1 / 100%
 

hijax is on a distinguished road

  Old

Originally Posted by cjbrowne View Post
2 - 5 seconds is massive in terms of page load times, and I definately wouldn't want people waiting for the jquery libraries to load unless I was using them extensively throughout my site.

There's a lot to be said for hand-coding features in Javascript. If we all rely on using jquery for every little effect we want, then who's going to be around still with the javascript skills needed for creating better alternatives to jquery in the future? I'd like to think that people who use jquery can still write their own javascript and understand why jquery works (or doesn't), and how to customise jquery for their own purposes.

First, there will always be people out there with skills in all the coding / programming fields. Don't worry!

2nd - I'm sorry but you are wrong. 2-5 seconds for little effects is WELL worth it. Again it depends what kind of website you use it in.
EX: If you're building portfolio website (a nice one), then you need to attract the potential customer with everything you can. And in today's web trend people like to see animation. Why do it in flash when you can do it with jquery?

3rd - A lot, and I mean a lot of TOP companies out there are using Jquery. A common thing I see too, is some websites out there are having a special rollover (forgot the name) on the navigation. Looks fancy but it cost them 800 KB just for the nav effect. But they still use it? Wonder why....

4th - You can host your scrips on a different server. Google offers it as well. Free of charge!

Again, respect your opinion but still don't see any point.

Reply With Quote
04-16-2009, 09:50 PM
#10
awatson is offline awatson
Status: I'm new around here
Join date: Apr 2009
Location:
Expertise:
Software:
 
Posts: 6
iTrader: 0 / 0%
 

awatson is on a distinguished road

  Old

jQuery rocks. I was leery of it at first, I tend to distrust frameworks. But it sure beats reinventing the wheel for all that stuff. Sure I could do it if I wanted to, but why? And I've noticed little or no performance hit on sites using jQuery. It's like a 49k download, hardly a big deal these days.

However I do think the site should be usable without any javascript.

Reply With Quote
Reply    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed