Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Sep 7th, 2013, 11:29 AM   #1
acegreen
Newbie
 
Join Date: Aug 2013
Posts: 17
Rep Power: 0 acegreen is on a distinguished road
CSS with hide/ unhide script

Hello -

I'm trying to "pair" the following js script with css presentational scheme

the js:
Quote:
/*has its own built-in css*/
<style>
<!--
.hidden { display: none; }
.unhidden { display: block; }
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>

<body>
<div id="col2">
<a href="javascript:unhide('content_title');">
<font face="Century Schoolbook" color="#000000">Content title</font></a>
</font></div>
<div id="col2">
<div id="content_title" class="hidden">
<p style="margin-bottom: 0">
Actual content here.
</p>
</div>
the (base) css:
Quote:
.hidden li {
background: #fff;
padding: 3px 8px;
display: table-row;
line-height: 500%;
font: 20px century schoolbook, serif;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.hidden li:hover {
background: #ddd;
text-decoration:underline;
}
Now my combination comes out to this essentially:
Quote:
<style>
<!--
.hidden {
display: none;
text-decoration: none;
background: #fff;
}

a.hidden :hover {
background: #ddd;
text-decoration:underline;
padding: 3px 8px;
line-height: 100%;
font: 20px century schoolbook, serif;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}

.unhidden {
display: block;
font: 20px century schoolbook, serif;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>

<body>
<ul class="cities"> //needed for the desired indent on the page
<div id="col2">
<a href="javascript:unhide('content_title');">
<font face="Century Schoolbook" color="#000000">Title of Content</font></a></div>

<div id="col2">
<div id="content" class="hidden">
<p style="margin-bottom: 0">
Actual Content.
</p>
</div>
<div id="content"> works fine. The "unhide('content_title') is unresponsive to the a.hidden :hover css. There has to be a way to get that part to "respond". I can induce changes to other parts of the script; I just can't do it to this particular section. Please help. Thanks!
acegreen is offline   Reply With Quote
Old Sep 7th, 2013, 4:48 PM   #2
pritaeas
mod_pritaeas
 
Join Date: May 2009
Location: The Netherlands
Posts: 251
Rep Power: 8 pritaeas is on a distinguished road
Re: CSS with hide/ unhide script

The combination does not have the id content_title.
pritaeas is offline   Reply With Quote
Old Sep 8th, 2013, 2:12 AM   #3
acegreen
Newbie
 
Join Date: Aug 2013
Posts: 17
Rep Power: 0 acegreen is on a distinguished road
Re: CSS with hide/ unhide script

The change didn't really have an effect. Anyway, I basically reworded the script through stackoverflow and here's what I have:

css:
Quote:
a.unhide li {
background: #fff;
padding: 3px 8px;
display: table-row;
line-height: 500%;
font: 20px century schoolbook, serif;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.unhide:hover { background: #ddd; padding: 3px 8px; display: table-row; line-height: 500%; font: 20px century schoolbook, serif; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out; }
.hide {
font: 20 px century schoolbook, serif;
color: black;
text-decoration: none;
}
.unhide {
font: 20 px century schoolbook, serif;
color: red;
text-decoration: none;
}
.js
Quote:
function unhide(divID) {
var item = document.getElementsByClassName(divID)[0];
console.log(item);
console.log(item.className == divID + ' hide');
if (item) {
item.className = (item.className == divID + ' hide') ? divID + ' unhide' : divID + ' hide';
}
}
php
Quote:
<div>
<a href="javascript:unhide('content1');">
Title of Content</a>

</div>
<div>
<div class="content1 hide">Body of content</div>
</div>
This works for the most part. Expect I'm trying to get the hover effect to hit "Title of Content". At the moment the hover effect hits "Body of content".
Also "Title of Content" is always underlined, and blue. I want it black, and underlined only on a hover. Any thoughts?
acegreen is offline   Reply With Quote
Old Sep 8th, 2013, 2:17 AM   #4
pritaeas
mod_pritaeas
 
Join Date: May 2009
Location: The Netherlands
Posts: 251
Rep Power: 8 pritaeas is on a distinguished road
Re: CSS with hide/ unhide script

As for the colour:
a {
  text-decoration: none;
  color: #000;
}

Am still not entirely sure what you want to happen.
pritaeas is offline   Reply With Quote
Old Sep 9th, 2013, 12:32 AM   #5
acegreen
Newbie
 
Join Date: Aug 2013
Posts: 17
Rep Power: 0 acegreen is on a distinguished road
Re: CSS with hide/ unhide script

Quote:
Originally Posted by pritaeas View Post
As for the colour:
a {
  text-decoration: none;
  color: #000;
}

Am still not entirely sure what you want to happen.
Thank you so much for replying. the "#000" is a typo and it should be "#ddd", actually. I'm including a tinyurl link to a page I set up that explains the script issue, using a working script. (the script on the page works, but I want to jazz it up and it won't cooperate with me). Thank you, again!

http://tinyurl.com/optehrg
acegreen is offline   Reply With Quote
Old Sep 9th, 2013, 2:45 AM   #6
pritaeas
mod_pritaeas
 
Join Date: May 2009
Location: The Netherlands
Posts: 251
Rep Power: 8 pritaeas is on a distinguished road
Re: CSS with hide/ unhide script

Try this:
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Language" content="en-us">
	<title>Cities & Towns</title>
	<style>
	<!--
	body
	{
		font-family: "century schoolbook", serif;
		font-size: 20px;
	}
	.hidden 
	{ 
		display: none; 
		color: #000;  
	}
	.unhide 
	{ 
	 	display: block; 
		color: #000;
	}
	a.unhide
	{
		text-decoration: none; 
	}
	a.unhide:hover
	{
		text-decoration: underline; 
	}
	.unhide:hover 
	{
		background: #ddd; 
		padding: 3px 8px; 
		display: table-row;
		transition: background .25s ease-in-out;
		-moz-transition: background .25s ease-in-out;
		-webkit-transition: background .25s ease-in-out;
	}
	-->
	</style>
	<script type="text/javascript">
		function unhide(divID) {
		    var item = document.getElementById(divID);
		    if (item) {
		        item.className = (item.className == 'hidden') ? 'unhide' : 'hidden';
		    }
		}
	</script>
</head>
<body>
	<class id="info">
		<a href="javascript:unhide('cityname');" class="unhide">
			This is really a js link. It should have a tiny #ddd (gray) backgroud/padding (3x8)that fades in when moused over. Also the underline should appear ONLY when a cursor is over this link. IF YOU CLICK, YOU WILL GET THE CONTENT "BLURB" BELOW IT
		</a>
	</class>
	
	<class id="info"> 
		<div id="cityname" class="hidden">
			This is where the content of the above link appears. It is just an info blurb, basically.   
			This portion works. It is "plain" without padding and it is not a link. No complaints/headaches with/from it.  
			THE ABOVE LINK IS THE PROBLEM.
			<br/>
			I envision about 10-12 of these "drop-down" info links (don't know their proper term).  
			Unfortunately, I am UTTERLY ;( failing in giving this scipt the two things it needs.  
			the script currently only works if there is no padding.
			<br/> 
			the underline to appear under the above link ONLY when on a mouse over.
			<br/>
			the fade effect to also occur (on the link above) when a mouse is over the link.
		</div>
	</class>
</body>
</html>
pritaeas is offline   Reply With Quote
Old Sep 11th, 2013, 12:21 AM   #7
acegreen
Newbie
 
Join Date: Aug 2013
Posts: 17
Rep Power: 0 acegreen is on a distinguished road
Re: CSS with hide/ unhide script

Much appreciate this !

I'm going to have to wait until later in the week to dissect the code and experiment with it (school started, alas lol).
acegreen is offline   Reply With Quote
Old Sep 12th, 2013, 9:47 AM   #8
Proxi
Programmer
 
Proxi's Avatar
 
Join Date: Aug 2013
Location: Netherlands
Posts: 39
Rep Power: 0 Proxi is on a distinguished road
Re: CSS with hide/ unhide script

I just tested your fix Pritaeas, it works and it's amazing
Proxi is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread in Forum | Next Thread in Forum »

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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Shell Script Tasks Icostyle Bash / Shell Scripting 1 Jan 16th, 2012 2:20 PM
Remote Copy Script effektd Bash / Shell Scripting 0 Apr 12th, 2011 8:18 AM




DaniWeb IT Discussion Community
All times are GMT -5. The time now is 4:19 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC