how to stylize javascript?

Discussion in 'CSS' started by driven, Jul 20, 2008.

  1. #1
    On this site here, you'll notice a little play button next to the "sample clip" text in the content section. It's too low relative to the rest of the text on that line. How would I go about assigning (negative) margins to it so that it aligned with the rest of the text on that line?

    I know I could align the text to go with the play button but I prefer to align the play button next to the text. But the code is in Javascript and I don't know how to work around it.

    Here is the css and javascript for that section here;

    
    	<p><span class="songtitle">March of The Ants - </span><span class="sampleclip">Sample Clip</span>
    
    <script language="JavaScript" type="text/JavaScript">
    writeWimpyButton("http%3A%2F%2Fwww%2Eandymitchellguitar%2Ecom%2Fmp3%2Fmarchoftheants%5Fnew%2Emp3", "15", "15", "&playingColor=036769&arrowColor=C12A15&theBkgdColor=036769&rollOverColor=036769&buttonStyle=square" ,"036769");
    </script>
    	</p>
    
    
    Code (markup):
     
    driven, Jul 20, 2008 IP
  2. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #2
    Hey - it's really late, but quickly - you don't style javascript.

    Either look in the .js file and find what it's writing, or try wrapping the script in a span and styling the span. Give something like this a go, may help, may not:

    .blah {
    // whatever position here
    }

    <span class="blah">
    // javascript here
    </span>
     
    iamben, Jul 20, 2008 IP
  3. driven

    driven Well-Known Member

    Messages:
    400
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #3
    the span suggestion definitely doesn't work as i tried before.

    and i don't know much about javascript to figure out what to edit.

    this is what the code looks like for the js file;


    
    function writeWimpyButton(theFile, wimpyWidth, wimpyHeight, wimpyConfigs, backgroundColor){
    
    	var defaultWidth = 35;
    	var defaultHeight = 35;
    	var defaultConfigs = "";
    	var baseURL = "";
    	var wimpySwf = "http://www.andymitchellguitar.com/mp3/wimpy_button.swf";
    
    	var wimpyWidth = (wimpyWidth == null) ? defaultWidth : wimpyWidth;
    	var wimpyHeight = (wimpyHeight == null) ? defaultHeight : wimpyHeight;
    	var wimpyConfigs = (wimpyConfigs == null) ? defaultConfigs : wimpyConfigs;
    	var backgroundColor = (backgroundColor == null) ? false : backgroundColor;
    	var myid = Math.round((Math.random()*1000)+1);
    	var flashCode = "";
    	var newlineChar = "\n";
    	var backgroundColor = (backgroundColor == null) ? false : backgroundColor;
    	if(typeof(backgroundColor) == "string"){
    		var Astring = backgroundColor.split("");
    		if(Astring[0] == "#"){
    			Astring.shift();
    			backgroundColor = Astring.join("");
    		}
    	}
    	if(backgroundColor == false){
    		tptParam = '<param name="wmode" value="transparent" />'+newlineChar;
    		tptEmbed = 'wmode="transparent"'+newlineChar;
    	} else {
    		tptParam = '<param name="bgcolor" value="#'+backgroundColor+'" />'+newlineChar;
    		tptEmbed = 'bgcolor="#'+backgroundColor+'"';
    	}
    	flashCode += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,47,0" width="'+wimpyWidth+'" height="'+wimpyHeight+'" id="wimpybutton'+myid+'">'+newlineChar;
    	flashCode += '<param name="movie" value="'+wimpySwf+'" />'+newlineChar;
    	flashCode += '<param name="loop" value="false" />'+newlineChar;
    	flashCode += '<param name="menu" value="false" />'+newlineChar;
    	flashCode += '<param name="quality" value="high" />'+newlineChar;
    	flashCode += '<param name="wmode" value="transparent" />'+newlineChar;
    	flashCode += '<param name="flashvars" value="theFile='+baseURL+theFile+wimpyConfigs+'" />'+newlineChar;
    	flashCode += '<embed src="'+wimpySwf+'" width="'+wimpyWidth+'" height="'+wimpyHeight+'" flashvars="theFile='+baseURL+theFile+wimpyConfigs+'" wmode="transparent" loop="false" menu="false" quality="high" name="wimpybutton'+myid+'" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'+newlineChar;
    	//document.write('<br><textarea name="textarea" cols="40" rows="10">'+flashCode+'</textarea><br>')+newlineChar;
    	document.write(flashCode);
    }
    
    Code (markup):
     
    driven, Jul 20, 2008 IP
  4. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    From the JS code, it looks like you can specify some variables: theFile, wimpyWidth, wimpyHeight, wimpyConfigs, backgroundColor but there's nothing about positioning.

    You should try to increase the padding of your script tag. To be honest, I'm not sure if it will work but it's worth a shot.

    script { padding-bottom: 5px; }
    Code (markup):
     
    steelfrog, Jul 21, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Damn, it's too bad the script tag is considered a block element... otherwise, it could be aligned with vertical-align : (
     
    Stomme poes, Jul 21, 2008 IP
  6. driven

    driven Well-Known Member

    Messages:
    400
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #6
    that won't work. actually, I did insert a span and the style to go with it. It seems it'll work in IE and Safari but not in Firefox. How strange is that?

    
    .js {
    	margin: 0 0 -2px 3px;
    	padding: 0;
    	}
    
    Code (markup):
     
    driven, Jul 21, 2008 IP