The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Show Hide text mix up, HTML codes mixing and counteracting uh I think
BriZZell
post Jul 10 2014, 04:19 PM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



Ok need a job so I made a site with everything I need on it and its a LOT OF STUFF. Stuff employers get turned off by unless they have excess time in which they may not very-well need ME!

OK so TheBriZZell.weebly.com is the site and I've spent most of the day making SHOW / HIDE thingys for the site and customizing code I've found on the web. I am working on to lists and one cancels the other so to speak. So now my site isn't looking up to par and of coarse I've no back up to put it back to the old site SO HURYhahah

As the codes are now. both "links" open the same list! If I put the lists bottom on top they really get out of wack. whats wrong!!!!!!!!!!!!!!!!!!!!!!! excl.gif
Here's my code:


list 1
<p><a onclick="java script:ShowHide('HiddenDiv')"><h2 class="wsite-content-title" style="text-align:left;"><strong>EXPERIENCE LIST</strong></h2></a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
<p>
<font color="#ffffff">
<font face="Georgia ">



<div><div class="wsite-multicol"><div class='wsite-multicol-table-wrap' style='margin:0 -0px'>
<table class='wsite-multicol-table'>
<tbody class='wsite-multicol-tbody'>
<tr class='wsite-multicol-tr'>
<td class='wsite-multicol-col' style='width:25.282016061674%;padding:0 0px'>

<div class="paragraph" style="text-align:left;"><font size="2">
Marketing<br />
Market Analysis<br />
Brakes<br />
Materials Planning<br />
Budgeting<br />
Microsoft Word<br />
Carpentry<br />
Multiple Phone<br />
Custodial<br />
Power Point<br />
Acrobat</font><br /></div>
</td>
<td class='wsite-multicol-col' style='width:25.142336414925%;padding:0 0px'>

<div class="paragraph" style="text-align:left;"><font size="2">
Internet/Web Development<br />
Inventory control<br />
Customer Service<br />
Interviewing<br />
Landscaping<br />
Ad Design<br />
Legal Logistics<br />
Planning<br />
Audio/Visual<br />
Engines (diesel/gasoline)<br />
Auto-body repair</font><br />
<font size="2"><span></span> </font><span style="line-height: 0; display: none;"></span><span style="line-height: 0; display: none;"></span><br /><font size="2"> </font></div>

</td>
<td class='wsite-multicol-col' style='width:24.575647523401%;padding:0 0px'>

<div class="paragraph" style="text-align:left;"><font size="2">
Computers<br />
Plumbing<br />
Data Entry<br />
Product Development<br />
Sales<br />
Payroll<br />
Public Relations<br />
Recruiting/Staffing<br />
Employee Relations<br />
Retail&nbsp;Open/Closing </font></div>

</td>
<td class='wsite-multicol-col' style='width:25%;padding:0 0px'>

<div class="paragraph" style="text-align:left;"><font size="2">Welding<br />
Excel (spreadsheets)<br />
Human Resources<br />
Financial Analysis<br />
Food Service<br />
Technical Writing<br />
Telemarketing<br />
General Accounting<br />
Typing<br />
Automotive&nbsp;Repair/Maintenance</font></div>

</td>
</font>
</p>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>


</p></p></a onclick="java script:ShowHide('HiddenDiv')">
</div><div class="wsite-multicol"></div class='wsite-multicol-table-wrap' style='margin:0 -0px'>
</table class='wsite-multicol-table'>
</tbody class='wsite-multicol-tbody'>
</tr class='wsite-multicol-tr'>
</td class='wsite-multicol-col' style='width:25.282016061674%;padding:0 0px'>

</div class="paragraph" style="text-align:left;"></font size="2">
</td>
</tr>
</tbody>
</table>
</div></div></div>

</div></div class="wsite-multicol"><div class='wsite-multicol-table-wrap' style='margin:0 -0px'>
</table class='wsite-multicol-table'>
</tbody class='wsite-multicol-tbody'>
</tr class='wsite-multicol-tr'>
</td class='wsite-multicol-col' style='width:75.524475524476%;padding:0 0px'>












list 2






<p><a onclick="java script:ShowHide('HiddenDiv')"><h2 class="wsite-content-title" style="text-align:left;"><strong>SKILLS </strong></h2></a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
<p>
<font color="#ffffff">
<font face="Georgia ">
<p><a onclick="java script:ShowHide('HiddenDiv')">Show/Hide</a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
<p>

<font color="#ffffff">
<font face="Georgia ">

• Music production experience in: sound, lighting, and stage<br />
<br />
• Management experience in multiple industries<br />
<br />
• Company reassessment and business development<br />
<br />
• Experience with public speaking and incoming /<br />
outgoing calls<br />
<br />
• Skilled with computers including: MS, Corel, BIOS, Linux, <br />
and HTML<br />
<br />
• Hard worker, quick learner, willing to travel<br />
<br />
• Detail oriented, mechanically and artistically inclined<br />
<br />
• Prepared product for shipping<br />
<br />
• Public Relations Repair<br />
<br />
• Made Site Supervisor within 8 months working in security.</div>
</font>
</p></a onclick="java script:ShowHide('HiddenDiv')">
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 10 2014, 04:52 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,192
Joined: 9-August 06
Member No.: 6



Yeah, both "links" would do the same thing since you use identical function calls, ShowHide('HiddenDiv').

list 1
HTML
<p><a onclick="jjavascript:ShowHide('HiddenDiv')"><h2 class="wsite-content-title" style="text-align:left;"><strong>EXPERIENCE LIST</strong></h2></a></p>

list 2
HTML
<p><a onclick="javascript:ShowHide('HiddenDiv')"><h2 class="wsite-content-title" style="text-align:left;"><strong>SKILLS </strong></h2></a></p>


I don't know what script handles this and how and I don't find any DIV or anything else with the ID HiddenDiv, but you should refer to the other hidden content in some other way. Do you use jQuery for this?


Also remove the java script: bit. It used to be used in URLs before we had event handlers as onclick, that is <a href="java script:doSomething()">. I've never seen it used in an event handler and I wouldn't have expected it to work.

This is enough.
HTML
<a onclick="ShowHide('HiddenDiv')">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 10 2014, 05:00 PM
Post #3


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



jQuery? no I just look up stuff on line for code and cut n past raw HTML
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 10 2014, 05:06 PM
Post #4


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



was that new code you sent me where do I put it
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 10 2014, 05:23 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,588
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



You have 2 <div> sections with the same id - 'HiddenDiv'. You need to change 1 of them otherwise you will have the problem you are seeing.
Oh, I also see you have the function ShowHide(divId) defined twice, you only need it once. And javascript is 1 word, not 2 words like you have it.

This post has been edited by CharlesEF: Jul 10 2014, 05:27 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 10 2014, 05:38 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,079
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jul 10 2014, 11:52 PM) *

HTML
<p><a onclick="java script:ShowHide('HiddenDiv')"><h2 class="wsite-content-title" style="text-align:left;"><strong>EXPERIENCE LIST</strong></h2></a></p>


As a sidenote, you can't put H2 inside P. There are other HTML syntax errors on the page as well, use http://validator.w3.org to spot them. In particular, the HTML of the second link is incorrect:

CODE
</a onclick="java script:ShowHide('HiddenDiv')">
</div>

--but from looking at the page, it seems the whole layout is broken. unsure.gif

QUOTE
This is enough.
HTML
<a onclick="ShowHide('HiddenDiv')">

Or even simpler, use the H2 element alone:

HTML
<h2 onclick="ShowHide('HiddenDiv')">EXPERIENCE LIST</h2>

Not sure how this affects the CSS though. The HTML output by Weebly's website builder looks pretty bloated.

QUOTE
I don't know what script handles this and how

It's on the page:

CODE
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>

--in fact there are two identical such scripts. You should just use one of them.

QUOTE
and I don't find any DIV or anything else with the ID HiddenDiv

It's right below the links:

CODE
<div class="mid" id="HiddenDiv" style="display: none;">

However each such DIV (and its associated link) needs a different ID for the script to separate them. Also note that ID values can't begin with a number.

Seems CharlesEF was faster. ninja.gif

This post has been edited by Christian J: Jul 10 2014, 05:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 10 2014, 05:43 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,192
Joined: 9-August 06
Member No.: 6



Sure you aren't joking me now? It's not there in the source I got. Or my Find tool is severely broken. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 10 2014, 05:46 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,192
Joined: 9-August 06
Member No.: 6



OK, I viewed source again and now it's there. Quaint. wacko.gif

QUOTE
jQuery? no I just look up stuff on line for code and cut n past raw HTML


jQuery is a huge and hugely popular JavaScript library and you do use it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 10 2014, 05:47 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,079
Joined: 10-August 06
Member No.: 7



What is it you can't find? I looked in the posted code sample, not the actual web page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 10 2014, 06:04 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,192
Joined: 9-August 06
Member No.: 6



I looked at the source. I couldn't find either the function name or the id anywhere on the page except in those links. That's why I thought it maybe was some jQuery trick even if the function calls certainly didn't look jQuery. As said, when I viewed source again they were there. Go figure.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 10 2014, 06:44 PM
Post #11


.
********

Group: WDG Moderators
Posts: 8,079
Joined: 10-August 06
Member No.: 7



Maybe the OP changed it...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 10 2014, 07:12 PM
Post #12


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



well one this i should of noted on the html is the page is built on weeblys editor there is a embed html tool im using you guys are really giving some great advice -its been years for my using html thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 10 2014, 07:19 PM
Post #13


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



gerrr turned off the qoutes but it still quotes and i can select all ... tablets suck ok.. em no spellchek in here nottt good

Guys what do you think of what im trying to do - have info avalable with ease but not have everything in your face as it is now - maybe driving employers away.. i lile a chalenge to learn from but what i need is a job
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 11 2014, 09:42 AM
Post #14


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



just for kicks is there a difference in javascript & java script
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 11 2014, 09:55 AM
Post #15


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



im getting very lost with where we are talking. im also only used to using html I don't even know what xml or css is sigh I want to continue using the editor as much as I can but with all these errors being made with out me screwing with it I don know if im hurting my self. I mean is this site less compatible with a potential employer. and WHY CANT I FIND ANY OFFLINE EDITORS anymore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 11 2014, 09:59 AM
Post #16


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



I changed HiddenDiv to HiddenDiv2 on the 2nd list - it didn't work uh well it stopped the second list from doing anything - guess that's an improvement.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 11 2014, 10:48 AM
Post #17


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



#%$ Im lost. could someone show the full codes with the fixes im not following.
like this <div id="893377112157426360" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">
the other list has a different div id and I thought HiddenDiv was more of a name of a command how do I rename this? frustrated I need to not be working this hard on this with out a job oh the conundrum @! I spelled conundrum right ? what????????????????? im so weard
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 11 2014, 11:32 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 1,588
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(BriZZell @ Jul 11 2014, 09:59 AM) *

I changed HiddenDiv to HiddenDiv2 on the 2nd list - it didn't work uh well it stopped the second list from doing anything - guess that's an improvement.

When you changed the <div> name you should have also changed the name in the javascript function call (the onclick event) for that <div>. Changing the <div> name is only half the solution.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 11 2014, 11:33 AM
Post #19


Programming Fanatic
********

Group: Members
Posts: 1,588
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(BriZZell @ Jul 11 2014, 09:42 AM) *

just for kicks is there a difference in javascript & java script

As far as browsers go there is no such language as 'java script'. That's the difference.

This post has been edited by CharlesEF: Jul 11 2014, 11:42 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BriZZell
post Jul 11 2014, 11:39 AM
Post #20


Newbie
*

Group: Members
Posts: 17
Joined: 10-July 14
Member No.: 21,237



QUOTE(CharlesEF @ Jul 11 2014, 12:32 PM) *


I changed HiddenDiv to HiddenDiv2 on the 2nd list - it didn't work uh well it stopped the second list from doing anything - guess that's an improvement.


ok give me an example please. and im confused on the forums idea that it wont work anyway? ahhhhhhhhg don't remember this being so complicated free-gonA
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th March 2019 - 07:52 PM