Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show/hide question

Status
Not open for further replies.
lisalis99

lisalis99

Programmer
Jan 9, 2005
121
US
Hi,

This maybe easy, but I can't seem to find anything on it- I want to show/hide a div based on a value, for instance, here's the logic:

if there is a poll available, then show the div with the poll, if not, then show another div.

I seem to find things onclick, onload, but what I really need is something based on a value to determine which div to show, does that make sense? I see code all over, but nothing relating to a value of something.

Any help is appreciated.
Thanks,
Lisa
 
Sort by date Sort by votes
Do you know at the time the page loads if a poll is available?

What is a poll?

My first instinct is to say:

(1) have both DIVs hidden to begin with:
<div id='div1' style='display:none'>...</div>
<div id='div2' style='display:none'>...</div>
(2) with the BODY tag's ONLOAD event, call a function that shows the appropriate DIV:
<body onload='showDiv()'>...</body>
(3) put the following (psudo)code in your showDiv() function:
Code: 
if(pollAvailable)
  document.getElementById("div1").style.display = 'block';
 else
  document.getElementById("div2").style.display = 'block';

Is this along the lines of what you're after?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Hi Dave,

I'm thinking this is what i'm looking for- a poll is a voting thing in our CMS, so I can say whether one is available or not, don't I need an actual javascript to show/hide the divs? Is there like a standard show/hide javascript available that I can plug this stuff in?

Thanks,
Lisa
 
Upvote 0 Downvote
What do you have so far? What I showed above IS JavaScript for showing a DIV. The style attribute in the DIVs I showed hides them initially.

I need to see your HTML so I can see what you mean by a poll being available. My pseudocode is only pseudocode because I am assuming the pollAvailable variable is true if there is a poll available (and false otherwise), but I have no idea how to make that determination based on what you've given me so far.

Have you written functions in JavaScript before? Are you making the determination to show the relevant DIV when the page loads or when the user clicks some button or what?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Hi Dave,

Okay, we are using a Content Management System that has very limited ability to use any kind of meaningful "real" code, we have to rely on conditionals within the CMS. So to get around that, we can use Javascript. I can't make it work with the "CMS" code, so I wanted to hide and show a div based on a value. Here is my code:

Code: 
[%{NoPoll=1} 
<div id="opinions">
	<table width="100%">
		<tr>
			<td width="50%" class="alignTop">
				<span class="redTextMain"></span>
				<br />
				
			</td>
			<td width="50%" valign="top" class="alignTop">
				<span class="redTextMain"></span>
                <div id="pollBox">
                    <div id="pollQuestion">
               There is no POLL
                    </div></div>
				<br />
			</td>
		</tr>
	</table>	
</div>
</div>

%|% 

<div id="opinions">
	<table width="100%">
		<tr>
			<td width="50%" class="alignTop">
				<span class="redTextMain">Opinion</span>
				<br />
				<pbs:newslist category="news" datesort=1 useobjects=1 leadin="255" objectclass=4 days=10 count=1>
			</td>
			<td width="50%" valign="top"class="yellowBack alignTop">
				<span class="redTextMain">Your Opinion Poll</span>
                <div id="pollBox">
                    <div id="pollQuestion">
					SHOW THE POLL
                  <pbs:pollmini category=NEWS03 width=100%>
                    </div></div>
				<br />
			</td>
		</tr>
	</table>	
</div>
</div>
%]

Instead of using their "coding logic" I want to use some Javascript in there so I can hide/show the appropriate content. I hope that helps, I'm sorry if I was vague at first.

Lisa
 
Upvote 0 Downvote
Lisa,

I'm just not familiar with CMS's. When you run the page and then view the source, is THIS (the above) what it looks like? ...or are the CMS tags replaced with HTML?

If they're replaced, can you show me what the above "translates" into?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Their logic is this:

[%{NoPoll=1}

Sorry, no poll

% | % - this is their else statment

Show the Poll

%]

All I want to do is show hide the div instead of relying on their logic, because it doesn't work at all,let's pretend that we're not even using a CMS. How Could I do this based on a value of a div?

Thanks,
Lisa
 
Upvote 0 Downvote
If you know the ID of the DIV, you can grab the DIV with JavaScript like so:

var myDiv = document.getElementById('div1');

If you can count on there being specific text inside that DIV when there is a poll and that text NOT being there when there isn't, you can look for it like so:

var pollPresent = myDiv.innerHTML.indexOf("<pbs:pollmini") > -1;

Now pollPresent will be true if that text is present and false if it is absent.

Finally:

Code: 
if(pollPresent)
  myDiv.style.display = 'block'; //shows DIV
else
  myDiv.style.display = 'none'; //hides DIV

Am I getting it?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
thanks... So what would my actual javascript look like? I guess that's what's confusing me, where do I put all this on my page? Here is the actual code on that page now that you understand the logic:

Code: 
[%{NoPoll=1} 
<div id="opinions">
    <table width="100%">
        <tr>
            <td width="50%" class="alignTop">
                <span class="redTextMain"></span>
                <br />
                
            </td>
            <td width="50%" valign="top" class="alignTop">
                <span class="redTextMain"></span>
                <div id="pollBox">
                    <div id="pollQuestion">
               There is no POLL
                    </div></div>
                <br />
            </td>
        </tr>
    </table>    
</div>
</div>

%|% 

<div id="opinions">
    <table width="100%">
        <tr>
            <td width="50%" class="alignTop">
                <span class="redTextMain">Opinion</span>
                <br />
                <pbs:newslist category="news" datesort=1 useobjects=1 leadin="255" objectclass=4 days=10 count=1>
            </td>
            <td width="50%" valign="top"class="yellowBack alignTop">
                <span class="redTextMain">Your Opinion Poll</span>
                <div id="pollBox">
                    <div id="pollQuestion">
                    SHOW THE POLL
                  <pbs:pollmini category=NEWS03 width=100%>
                    </div></div>
                <br />
            </td>
        </tr>
    </table>    
</div>
</div>
%]
 
Upvote 0 Downvote
Well, are you saying that there will be only one DIV on the page and if it has a poll you want to show it and if it doesn't, then you don't?

Or will both DIVs be there, one with a poll and one without?

Dave

P.S. We're almost there!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
I'm feeling like we're almost there too, thanks for helping me out- I was just thinking of that, it would be 2 divs, like I showed, one would show it with the poll, and one would show something else if the poll was not available. the divs would look exactly like what I have in the above code. Does that help?
 
Upvote 0 Downvote
Actually, it only solidifies my confusion! :)

The second DIV, with the poll... how could it be on the page if there is no poll? See what I'm saying?

...or will the DIV be there, but there will be no "<pbs:pollmini" to be found?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Dave,

Yes, that's it

...or will the DIV be there, but there will be no "<pbs:pollmini" to be found?

that's why I was wondering if it could detect on load, an ID of the div, if div1 has <pbs:pollmini> in it, then that's the div with the poll,so show that one if not, show the other div.

Does that help? I know, if only our system didn't suck, I wouldn't have to hack my way to make this work.

Lisa



 
Upvote 0 Downvote
Okay, try this:

(1) You can't have two DIVs on the same page with the same ID (you CAN, but JavaScript will not behave the way you like). So, change the first to "opinionsNoPoll" and the second to "opinionsPoll". I'll ignore the fact that you repeat other IDs. It's only important if you need to find them with JavaScript.

(2) Take care you don't have two </div> tags on each DIV (at the end). It probably doesn't hurt anything, but it could lead to confusion.

(3) This is going to be a little weird, but hide the first DIV and make the 2nd one invisible:

<div id='opinionsNoPoll' style='display:none'>...</div>
<div id='opinionsPoll' style='visibility:hidden'>...</div>

You MIGHT have to do this because if BOTH had display:none, you might not be able to do what I am going to suggest next.

(4) In your BODY tag, include: onload='pickDiv()'

<body onload='pickDiv()'>

(5) In the HEAD section of your page, make sure you have a SCRIPT section and it includes this function:

Code: 
<head>
<script>
function pickDiv()
{
 var poll = document.getElementById("opinionsPoll");
 if(poll.innerHTML.indexOf("<pbs:pollmini") > -1)
  poll.style.visibility = "visible";
 else
  document.getElementById("opinionsNoPoll").style.display = "block";
}//end pickDiv()
</script>
</head>

Can you follow what I did here? Again, this assumes that both DIVs are on the page and that the opinionsPoll DIV will have the text "<pbs:pollmini" if there is a poll to show and will not have it if there is no poll to show.

Are we there yet! :)

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
I'm trying it now... cross your fingers... I can't thank you enough for your time...

Are these to be single quotes?

<div id='opinionsNoPoll' style='display:none'>...</div>
<div id='opinionsPoll' style='visibility:hidden'>...</div>

Just want to make sure, same thing with calling the function, is it single quotes?

Lisa
 
Upvote 0 Downvote
It's nice to be consistent, but they could be single or double quotes as long as:

(1) you use the same style CLOSE-quotes as you do OPEN-quotes; and

(2) when nesting quotes, you don't use the same quotes twice. E.g., [bad]onload="alert("Hi!");"[/bad]

Good luck! I'm almost out of here, so I might have to wait until Monday to hear the dramatic conclusion of this!

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Comming from the Noob:

I had a similar problem a few weeks ago. My client came to me with the idea of getting a nav menu similar to yahoo's and wanted me to do it in javaScript. I had never touched JavaScript prior to 3 weeks ago.

I understand things best by looking at examples. So i found a script that gave me something similar to what I wanted, studied it, and modified it. I suggest you take a look at this script from Dynamic Drive:


As for my code, I have a tabbed menu similar to this script that changes the content based on the tab that is clicked. The tabs consist of Anchor tags, and the content containers are DIV tags. Then you simply call function to display the container based on your needs. Mines run onclick instead of onmouseover and depending on what tab they are on, the tabID is passed to be used in a search query.
 
Upvote 0 Downvote
Okay, I tried this:

Code: 
<head>
<script language="JavaScript" type="text/javascript">
function pickDiv()
{
 var poll = document.getElementById("opinionsPoll");
 if(poll.innerHTML.indexOf("pbs:pollmini") > -1)
  poll.style.visibility = "visible";
 else
  document.getElementById("opinionsNoPoll").style.display = "block";
}
</script>
</head>

<body onload="pickDiv()">
<div id="opinionsNoPoll" style="display:none">
<table width="100%">
		<tr>
			<td width="50%" class="alignTop">
				<span class="redTextMain"></span>
				<br />
			</td>
			<td width="50%" valign="top" class="alignTop">
				<span class="redTextMain"></span>
                <div id="pollBox">
                    <div id="pollQuestion">
               There is no POLL
                    </div>
				</div>
				<br />
			</td>
		</tr>
	</table>	
</div>
	</div>
<div id="opinionsPoll" style="visibility:hidden">
	<table width="100%">
		<tr>
			<td width="50%" class="alignTop">
				<span class="redTextMain">Opinion</span>
				<br />
				<pbs:newslist category="news" datesort=1 useobjects=1 leadin="255" objectclass=4 days=10 count=1>
			</td>
			<td width="50%" valign="top"class="yellowBack alignTop">
				<span class="redTextMain">Your Opinion Poll</span>
                <div id="pollBox">
                    <div id="pollQuestion">
                  <pbs:pollmini category=NEWS03 width=100%>
                    </div></div>
				<br />
			</td>
		</tr>
	</table>	
</div>
</body>

It shows nothing!! It has to be something easy... if I take away the styles from the 2 divs I see both of them, but it can't seem to determine it.

HELP!
Lisa
 
Upvote 0 Downvote
'can't be sure, but you have two <div> tags at the end of the first DIV:

Code: 
<div id="opinionsNoPoll" style="display:none">
<table width="100%">
        <tr>
            <td width="50%" class="alignTop">
                <span class="redTextMain"></span>
                <br />
            </td>
            <td width="50%" valign="top" class="alignTop">
                <span class="redTextMain"></span>
                <div id="pollBox">
                    <div id="pollQuestion">
               There is no POLL
                    </div>
                </div>
                <br />
            </td>
        </tr>
    </table>    
[!]</div>
    </div>[/!]

Also, a small change to the JavaScript I have previously offered:
Code: 
function pickDiv()
{
 var poll = document.getElementById("opinionsPoll");
 if(poll.innerHTML.indexOf("pbs:pollmini") > -1)
  poll.style.visibility = "visible";
 else
 [!]{[/!]
  document.getElementById("opinionsNoPoll").style.display = "block";
  [!]poll.style.display = "none";
 }[/!]
}

The visibility/hidden line will not show the contents of the DIV, but WILL reserve screen space for it. What's going on here (or SHOULD be going on here) is that the no-poll-DIV is completely collapsed to begin with and the poll-DIV is invisible, but has the screen space reserved. Then, the JavaScript either makes the poll-DIV visible, or it expands the no-poll-DIV AND (with the added JavaScript) collapses the poll-DIV (i.e., giving up its screen space for the no-poll-DIV to use).

Ah, and I just tested your code and found your (my) problem. Although you chose the case (upper and lower) of your HTML, when you get "innerHTML", your browser tends to make the tags all UPPER case, so checking for the lower-case text won't cut it. I found this out by a simple debugging step as shown below (and for you to add to your JavaScript 'toolbox'):
Code: 
 var poll = document.getElementById("opinionsPoll");
 [!]alert(poll.innerHTML);[/!]
Once I realized this, it was a very simple fix:
Code: 
if(poll.innerHTML.[!]toLowerCase().[/!]indexOf("pbs:pollmini") > -1)

Does that do it for you?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
391
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
365
xwb
xwb
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
94
chrisjchrisj
chrisjchrisj
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
232
waubain
waubain
BobMCT
  • Locked
  • Question
php + js + jquery + $.post combination question(s)???
Replies
1
Views
74
BobMCT
BobMCT

Part and Inventory Search

Sponsor

Back
Top