Support Forums

Treating javascript like an image?

This is a discussion on Treating javascript like an image? within the Modules / Plugins / Modifications forums, part of the Developer Forums category; I am running into an issue with javascript. I replaced 4 static images with javascript banner code and wrapped each ...


Go Back   68 Classifieds Forums > Developer Forums > Modules / Plugins / Modifications

Reply
 
Thread Tools Display Modes
Old 08-23-2008, 01:34 PM   #1
Member
 
Join Date: Jul 2008
Posts: 76
Rep Power: 14
centinel3 is on a distinguished road
Default Treating javascript like an image?

I am running into an issue with javascript.

I replaced 4 static images with javascript banner code and wrapped each one in a <div> tag for hover/styling. These 4 spots are located in the body section and in order for these spots to line up exactly like the static images I had to tweak the style #content. Now, while the main body page looks the same as before (with banner script rather than static images), when you navigate to other pages the body is aligned left and smushed over.

I understand the logic since I modified the #content to float left, so my question is, is there a way to treat this openx javascript as a static image, or give each javascript code specific styles so that it will align properly?

The script I'm using below aligns the 4 javascript spots correctly, but throws all other body elements to the left:

/* Content
* Main content area
*/
#content{
float: left;
text-align: left;
margin:0px;
padding:0px 0px 0px 10px;

}

#content th a:link, #content th a:visited {
color: #333333;
text-decoration: none;
}
#content th a:hover {
color: #333333;
text-decoration: underline;
}

.indexcontent {
line-height: 1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#newlistings {
margin: 30px 0px 0px 0px;
}

.contentpic {
width: 325px;
height: 150px;
float: left;
border: 1px solid #CCCCCC;
margin: 0px 15px 20px 10px;
}

.contentpic:hover {
border: 1px solid #68B8DF;
}
------------------------------------------------------------

Here is the home.tpl page:

{$pPageContent}
<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=2");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>


<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=3");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>


<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=5");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>


<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=4");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>

<div id="newlistings">
<h2>{$smarty.const.LANG_FEATURED_LISTINGS}</h2>
<hr />
{feature_listings_horizontal number=8 cols=4 table_attr='width="100%" cellpadding="3" cellspacing="3"' td_attr='style="border-top: 0px dashed #CCCCCC; background: transparent; text-align:center; "'}</div>
centinel3 is offline   Reply With Quote
Old 08-23-2008, 02:00 PM   #2
curmudgeon
 
Join Date: Mar 2006
Posts: 5,408
Rep Power: 137
Lhotch is a glorious beacon of light Lhotch is a glorious beacon of light Lhotch is a glorious beacon of light
Default

oops, I misunderstood question.

Do you have a link to the pages so we can see whats going on?
__________________
Larry

Knowledge learned is more valuable than knowledge given.
Lhotch is offline   Reply With Quote
Old 08-23-2008, 02:59 PM   #3
Member
 
Join Date: Jul 2008
Posts: 76
Rep Power: 14
centinel3 is on a distinguished road
Default

Here's the link to the test page I have been working with.

http://closeoutfloorsamples.com/index.php?template=TEST

I did find that if I put a space (  on the very top of the page (following {$pPageContent}) That the script banner spots lined up where they should, though when I checked in firefox, the issue still remained.

Thanks for looking at the code. I have been working on this alteration for a couple of days now.

chris
centinel3 is offline   Reply With Quote
Old 08-27-2008, 12:10 PM   #4
Member
 
Join Date: Jul 2008
Posts: 76
Rep Power: 14
centinel3 is on a distinguished road
Default Any help...

If there is anyone out there who knows how to fix this issue I'm having with javascript it would be much appreciated. I'm not sure why these 4 java banners are dropping down and would like to fix this because the only way I came up with fixing this was to float the body left, which in turn now makes all of the body float left, which isn't exactly aesthetically pleasing to the eye.

chris
centinel3 is offline   Reply With Quote
Old 08-27-2008, 12:18 PM   #5
68 Classifieds Staff
 
Eric Barnes's Avatar
 
Join Date: Mar 2006
Location: Belmont, NC
Posts: 5,489
Rep Power: 134
Eric Barnes is just really nice Eric Barnes is just really nice
Default

Unless I am missing something it looks fine to me. Using Firefox on a Mac.

I see banners:
Furniture - Electronics
Automotive - Clothes
__________________
Eric Barnes
68 Classifieds Developer
Customer Area | Issue Tracker | Documentation | 68C Mods | 68 @ Twitter | My Modules
Eric Barnes is offline   Reply With Quote
Old 08-27-2008, 02:48 PM   #6
Member
 
Join Date: Jul 2008
Posts: 76
Rep Power: 14
centinel3 is on a distinguished road
Default

If you click the test link a couple of posts ago you will see what I'm talking about. The top of the top two images aren't lined up with the top of the menu. They drop down 20+ pixels.

chris
centinel3 is offline   Reply With Quote
Old 08-27-2008, 04:10 PM   #7
68 Classifieds Staff
 
Eric Barnes's Avatar
 
Join Date: Mar 2006
Location: Belmont, NC
Posts: 5,489
Rep Power: 134
Eric Barnes is just really nice Eric Barnes is just really nice
Default

Try this:

style.css (line 275)
Code:
#content {
margin:1px;
padding:1px;
}
__________________
Eric Barnes
68 Classifieds Developer
Customer Area | Issue Tracker | Documentation | 68C Mods | 68 @ Twitter | My Modules
Eric Barnes is offline   Reply With Quote
Old 08-27-2008, 04:40 PM   #8
Member
 
Join Date: Jul 2008
Posts: 76
Rep Power: 14
centinel3 is on a distinguished road
Default Ahhhhhhhh!!!!!!!!

Why the heck does that work!!!!

Sort of.

I mean I'm not going to start splitting apples here, but come on. I'm 2px off from being dead even (which I'm fine with). What I want to know is why doesn't it line up automatically to the upper left? This is the stuff that makes my eyeballs hairy! HAHHAAAA! Thank you Eric for the code. If you know why, fill me in on this mystery. If not, I'm letting this sleeping dog lie.

Thanks again,
Chris
centinel3 is offline   Reply With Quote
Old 08-27-2008, 05:00 PM   #9
curmudgeon
 
Join Date: Mar 2006
Posts: 5,408
Rep Power: 137
Lhotch is a glorious beacon of light Lhotch is a glorious beacon of light Lhotch is a glorious beacon of light
Default

Margins and padding is handled differently by different browsers. It sure would be nice if they would all actual adhere to standards wouldnt it?
__________________
Larry

Knowledge learned is more valuable than knowledge given.
Lhotch is offline   Reply With Quote
Old 08-27-2008, 05:12 PM   #10
Member
 
Join Date: Jul 2008
Posts: 76
Rep Power: 14
centinel3 is on a distinguished road
Default Oh yes it would

You're telling me. Can we put it to a vote?

chris
centinel3 is offline   Reply With Quote
Reply

Thread Tools
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
custom image loader issues please help roamex Templates, HTML, CSS, and Design Help 2 07-28-2008 09:36 PM
Image setting and uploading Sharon Technical Support 4 06-02-2008 09:20 PM
Mod: Favorites Image Fix crystal Modules / Plugins / Modifications 5 05-27-2008 02:59 PM
Image and Database Problems discguy Technical Support 7 04-24-2008 01:51 PM


All times are GMT -4. The time now is 05:02 PM.


Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2011, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0