Invoke javascript in a css.

Question

asemakula 0 Newbie Poster

15 Years Ago

<script type="text/javascript">
var ... ;...
Book_Image_Sources=new Array(...);
function carousel() {...}
</script>

I want to (i hope it`s possible) call the script above in a css class like

#carouse
{
... somehow call the script above
}
then in my html code

<img src="./images/placeholder.gif" class="carouse" />

I am using a WYSIWYG editor (tinyMCE) within openrealty(a real estate mg`t System) and apparently it comments out the javascript and displays the js code in the frontend.

so am trying to find a work around this and am hoping the above approach will do it.

Or how else can i get this to work. am a little new to js.

Thanx

html-css javascript

2 Contributors
4 Replies
171 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by asemakula

essential 84 Posting Shark

15 Years Ago

Try this one out and run the whole document, and see if it will fit what you need:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Free Live Help!</title>
<style type="text/css">
<!--
div#main {
color : #777;
height : auto;
margin : 0 auto;
padding : 0;
line-height : 1.4;
letter-spacing : .100em; 
width : 100%; }

span.indent { 
display : inline-block;
margin : 0;
padding-top : .500em;
text-indent : .500em; }

pre:before {
content : "Posted Code :";
letter-spacing : .200em;
color : #808080;
background-color : #FAFAFA;
border-top : 1px solid;
border-bottom : 1px solid;
padding-bottom : .300em;
padding-top : .300em;
text-indent : 1em;
white-space : pre;
margin-bottom : 1em;
display : block; }

pre {
font-family : "Lucida Console", "Lucida Sans Typewriter", "Courier New", monospace;
letter-spacing : 4px;
color : #000;
padding : 0 0 1em 0;
border-bottom : 1px solid #808080;
margin : 1.500em 0 1em 1em;
white-space : pre-wrap; }

div.tube { padding : 1em; }

/* DEMO Classes, will be used as arrays inside the carousel function. */

img.class1 { 
border : 2px solid #000;
width : 100px;
height : 100px; }

img.class2 { 
border : 2px solid #000;
width : 200px;
height : 200px; }

img.class3 { 
border : 2px solid #000;
width : 300px;
height : 300px; }
-->
</style>
<script id="script15" type="text/javascript">
<!--
var carousel;

var Book_Image_Sources = [ "class1", "class2", "class3" ];
var cLen = Book_Image_Sources.length;   
   carousel = function() {
   return Book_Image_Sources[ Math.floor((( Math.random() ) * cLen )) ];
   };       
// -->
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h3>Sample DEMO</h3>
<script type="text/javascript">
<!-- Calling out the carousel function using  eval method.

eval( "document.writeln( '<img src=\"images/placeholder.gif\" id=\"testClass\" class=\"' + carousel() + '\">' )" );
// -->
</script>
<hr>
<pre>&lt;script type="text/javascript"&gt; var... ;... Book_Image_Sources=new Array(...); function carousel() {...} &lt;/script&gt;</pre>

<p>I want to (i hope it`s possible) call the script above in a css class like
#carouse<br> {<br>... somehow call the script above<br> } then in my html code</p>


<pre>&lt;img src="./images/placeholder.gif" class="carouse"&gt;</pre>

<p>I am using a <acronym title="What You See Is What You Get">WYSIWYG</acronym> editor (tinyMCE) within openrealty(a real estate mg`t System) and apparently it comments out the javascript and displays the js code in the frontend.
so am trying to find a work around this and am hoping the above approach will do it.
Or how else can i get this to work. am a little new to js.
Thanx</p>
</div>
</div> 
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

asemakula 0 Newbie Poster · Answer 1 · 2009-06-07T23:11:37+00:00

Thanx Essential,
ok this is what i have according to essentials reply...
tinyMCE accepts the call now but it still fails to run, as in nothing displays i don`t why but i think i am failing to make out where to call the <img>.

<style type="text/css">
<!--
<head>...
div#main {
color : #777;
height : auto;
margin : 0 auto;
padding : 0;
line-height : 1.4;
letter-spacing : .100em; 
width : 100%; }

span.indent { 
display : inline-block;
margin : 0;
padding-top : .500em;
text-indent : .500em; }

pre:before {
content : "Posted Code :";
letter-spacing : .200em;
color : #808080;
background-color : #FAFAFA;
border-top : 1px solid;
border-bottom : 1px solid;
padding-bottom : .300em;
padding-top : .300em;
text-indent : 1em;
white-space : pre;
margin-bottom : 1em;
display : block; }

pre {
font-family : "Lucida Console", "Lucida Sans Typewriter", "Courier New", monospace;
letter-spacing : 4px;
color : #000;
padding : 0 0 1em 0;
border-bottom : 1px solid #808080;
margin : 1.500em 0 1em 1em;
white-space : pre-wrap; }

div.tube { padding : 1em; }

/* DEMO Classes, will be used as arrays inside the carousel function. */

img.class1 { 
border : 2px solid #000;
width : 100px;
height : 100px; }

img.class2 { 
border : 2px solid #000;
width : 200px;
height : 200px; }

img.class3 { 
border : 2px solid #000;
width : 300px;
height : 300px; 

}
-->
</style>
<script id="script15" type="text/javascript">
<!--
var carousel;
	var Book_Image_Width=140;
	var Book_Image_Height=225;
	var Book_Border=true;
	var Book_Border_Color="gray";
	var Book_Speed=15;
	var Book_NextPage_Delay=1500; //1 second=1000
	var Book_Vertical_Turn=0;	

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

	Book_Image_Sources=new Array(
		"images/listing_photos/1_china_room.jpg","http://www.dynamicdrive.com",
		"images/listing_photos/1_dining_room.jpg","http://www.javascriptkit.com",
		"images/listing_photos/1_green_room.jpg","", //this slide isn't linked
		"images/listing_photos/1_vermeil_room.jpg","http://www.codingforums.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
	var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
	var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

	function ImageBook(){
		if(document.getElementById){
			for(i=0;i<Book_Image_Sources.length;i+=2){
				B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
			Book_Div=document.getElementById("Book");
			B_LI=document.createElement("img");Book_Div.appendChild(B_LI);	
			B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
			B_MI=document.createElement("img");Book_Div.appendChild(B_MI);	
			B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
			B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
			B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
			B_LI.style.left=0+"px";
			B_MI.style.top=0+"px";
			B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
			B_RI.style.top=0+"px";
			B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
			B_LI.style.height=Book_Image_Height+"px";
			B_MI.style.height=Book_Image_Height+"px";
			B_RI.style.height=Book_Image_Height+"px";
			B_LI.style.width=Book_Image_Width+"px";
			B_MI.style.width=Book_Image_Width+"px";
			B_RI.style.width=Book_Image_Width+"px";
			if(Book_Border){
				B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
				B_LI.style.borderWidth=1+"px";
				B_MI.style.borderWidth=1+"px";
				B_RI.style.borderWidth=1+"px";
				B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
			B_LI.src=B_Pre_Img[0].src;
			B_LI.lnk=Book_Image_Sources[1];
			B_MI.src=B_Pre_Img[2].src;
			B_MI.lnk=Book_Image_Sources[3];
			B_RI.src=B_Pre_Img[4].src;
			B_RI.lnk=Book_Image_Sources[5];
			B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
			B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
			B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
			BookImages()}}

	function BookImages(){
		if(!B_Stppd){
			if(Book_Vertical_Turn){
				B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
				MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
				B_MI.style.top=MidOffset+"px";
				B_MI.style.height=B_MSz+"px"}
			else{	B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
				MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
				B_MI.style.left=MidOffset+"px";
				B_MI.style.width=B_MSz+"px"}
			B_Angle+=Book_Speed/720*Math.PI;
			if(B_Angle>=Math.PI/2&&B_Direction){
				B_Direction=0;
				if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
				B_MI.src=B_Pre_Img[B_CrImg].src;
				B_MI.lnk=Book_Image_Sources[B_CrImg+1];
				B_CrImg+=2}
			if(B_Angle>=Math.PI){
				B_Direction=1;
				B_TI=B_LI;
				B_LI=B_MI;
				B_MI=B_TI;
				if(Book_Vertical_Turn)B_MI.style.top=0+"px";
				else B_MI.style.left=Book_Image_Width+1+"px";			
				B_MI.src=B_RI.src;
				B_MI.lnk=B_RI.lnk;

				setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
			else setTimeout("BookImages()",50)}
		else setTimeout("BookImages()",50)}

	function Book_Next_Delay(){
			if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src;
			B_RI.lnk=Book_Image_Sources[B_CrImg+1];
			B_MI.style.zIndex=2;
			B_LI.style.zIndex=1;
			B_Angle=0;
			B_CrImg+=2;
		setTimeout("BookImages()",50)}

	function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
	function B_Rstrt(){B_Stppd=false}
	
var Book_Image_Sources = [ "class1", "class2", "class3" ];
var cLen = Book_Image_Sources.length;   
   carousel = ImageBook() {
   return Book_Image_Sources[ Math.floor((( Math.random() ) * cLen )) ];
   };       
// -->
</script>...</head>

then in the body

<!-- Calling out the carousel function using  eval method.  eval( "document.writeln( '<img src="placeholder.gif" id="testClass" class="' + carousel() + '">' )" ); // -->

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-06-08T13:08:25+00:00

You mean, the entire code is not working or it just won't display images?

asemakula 0 Newbie Poster · Answer 3 · 2009-06-08T15:31:13+00:00

yeah the entire code wont work i think due to some invocation irregularity..