July 8, 2008 09:23pm pdt

1. war1 97,953
2. mtz1of4 77,869
3. b0lsc0tt 61,240
4. hielo 40,300
5. Kravimir 37,778
6. mplungjan 21,475
7. Steggs 18,020
8. GreenGhost 16,275
9. eoinosul... 10,100
10. TName 9,500
11. araim 8,250
12. nexusnation 6,000
13. LordOfPorts 5,800
14. aneeshch... 5,750
15. strobbe 5,000

1. mtz1of4 213,210
2. war1 197,096
3. b0lsc0tt 93,569
4. TName 91,555
5. hielo 45,300
6. mplungjan 45,250
7. Kravimir 37,778
8. Steggs 32,045
9. GreenGhost 28,755
10. Zvonko 17,450
11. Sheharya... 15,350
12. VirusMinus 15,200
13. eoinosul... 14,100
14. basicins... 12,100
15. mreuring 9,990

05.16.2008 at 01:30AM PDT, ID: 23407633

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.3

verhoijsen, javascript, css, php, wordpress

Zones: JavaScript, Internet Explorer Web Browser, Firefox Web Browser

Tags: Javascript/PHP/CSS, Firefox 3.0 Beta 5 and IE7, http://wwww.onboardcouriers.eu/verhoijsen, javascript, css, php, wordpress

I have been working on a Wordpress theme (Wordpress 2.5.1) for quite some time now. I am trying to integrate a floating images javascript into the background of a template/theme. The javascript came from the old site. I cannot contact the former designer anymore and I don't know a lot about javascript at all.
It refuses to load if I call it in the header because the body has not been created yet. I figured that out. When I add it to the footer using: <script type="text/javascript" src="http://www.onboardcouriers.eu/verhoijsen/wp-content/themes/Verhoijsen2/float.js"> it does not load in FF at all. When I integrate the script in the foter it does load, but only on the index page and every time an image is about to leave the browser window it enlarges it.
My first question is how can I use the javascript using an include which works in IE7 and FF?
My second question is how can I make the images show on all pages? Can I use some smart path to the image folder? I mean not an absolute path, because that is not working and /floating_pic/image_name only works on the front page. Each page has a different pathway so I need to have a path that works on all images.
My third question: How can I stop the browser window from expanding every time an image leaves the browser window without messing with the lay-out?

Start your free trial to view this solution

Question Stats

Zone: Software

Question Asked By: rhandalthor

Solution Provided By: JohnSixkiller

Participating Experts: 1

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

05.16.2008 at 01:45AM PDT, ID: 21580937

Rank: Guru

JohnSixkiller:

Hi,

1. It cannot load until you close the tag: <script type="text/javascript" src="http://www.onboardcouriers.eu/verhoijsen/wp-content/themes/Verhoijsen2/float.js"></script>

2. I dont know the structure of your web, but you can generate paths with PHP for example
other ways relative or absolute: http://support.internetconnection.net/TECHNICAL_REFERENCE/THE_WWW/Absolute_and_Relative_File_Paths.shtml

3. If I undestand correctly, this should help: set style="overflow:hidden" to parent element of the floating images (BODY for example)

05.16.2008 at 02:00AM PDT, ID: 21581031

rhandalthor:

# I found out just 5 minutes ago. Solved by adding </script>
# 2 I would like to use a relative path yes. Can I use a Wordpress php tag in a javascript?
# 3 body { overlow hidden;} make scroll bars disappear, but so do posts for which visitors have to scroll down (vertically). So that doesn't work.

05.16.2008 at 02:14AM PDT, ID: 21581118

rhandalthor:

Creating: var trailimage=["<?php bloginfo('wpurl'); ?>/floating_pics/001.gif", 247, 301] does not work in FF3 anyways. That I have just tested.

05.16.2008 at 02:58AM PDT, ID: 21581368

Rank: Guru

JohnSixkiller:

2. I dont know much about your PHP background, but anything what will result in correct URL will work ;)
/path/images
subpath/images
../ = one level up ../images

3. Try to place transparent aboslute positioned DIV in your HTML. Set its width/height 100% (or left/right/top/bottom to 0px) and overflow:hidden. And then place your floating images into it.

John

05.16.2008 at 03:17AM PDT, ID: 21581453

rhandalthor:

Well thanks for the advice. I think I am slowly getting there... I Added a divider to keep the images and styled it like this:

#keepimages{
position:absolute;
height:100%;
width:100%;
opacity:1;
overflow:hidden;
filter:alpha(opacity=100); !important
}
But there are still bars when images leave the screen. I think because the javascript looks at the body tag. Here are the first two lines of float.js:

var screenwidth =document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var screenheight =document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

Any ideas John? IMy javascript skills are zero.

I will look into the path to the floating image folder. I is just that I added an absolute path and it didn't work which was so weird......

.

05.16.2008 at 03:21AM PDT, ID: 21581477

rhandalthor:

Oh. my bad, it is working now!!!! Yes! Alright. Thanks for that!! Now I need to work on the path and add another column next to the main content. When I have solved the pathway issue I will close this thread and accept your solutions (plural). Thanks a lot so far!!

05.16.2008 at 03:25AM PDT, ID: 21581491

rhandalthor:

Hmm, well but there is not horizontal bar now either :-( . And I'd like to have at least 10 posts on the main page and some pages are just longer than the browser screen. I wonder If there is some solution to that....

05.16.2008 at 03:26AM PDT, ID: 21581495

Rank: Guru

JohnSixkiller:

You are welcome.

One note: Setting opacity/filter is propably not necessary. Background-color is default transparent.

05.16.2008 at 03:40AM PDT, ID: 21581564

rhandalthor:

Removed the opacity. It is not necessary like you said. Opacity in IE7 and FF are different though. In IE7 in can hardly read the text.
And unfortunately did overflow:hidden remove the vertical scrollbar completely thereby cutting of posts. It seems overflow cannot be used to fix this expanding browser window issue. I cannot get my head around it.

05.16.2008 at 03:44AM PDT, ID: 21581583

rhandalthor:

Well, adding height:1000px; does help. But it isn't a pretty solution. I will be forced to display an x amount of posts to make sure they are displayed. Beyond x pixels they won't show.

05.16.2008 at 04:16AM PDT, ID: 21581746

Rank: Guru

JohnSixkiller:

In DIV layout you can have master DIV and DIV with posts and DIV with images in it. But this will propably wont be the case. It is not possible to set absolute DIV to have 100% height of relative content.

However you can use:

<script>
function setDiv(){
document.getElementById("divTest").style.height = document.getElementById("myBody").offsetHeight+"px";
}
</script>

05.16.2008 at 04:19AM PDT, ID: 21581757

rhandalthor:

I tried something with min-height and max-height. Just max-height doesn't work. And min-height + max-height seems to be the same as height in this case basically. Height:auto or inherit will not do either. Well that was a longshot anyways.
I will keep it at height:1000px until I have a better solution. If posts are larger than I expect they will be cut off cause they surpass the 1000 pixels. Either an adjustment of the javascript, a good CSS solution or I will be forced to drop this script for another one or ....

05.16.2008 at 04:24AM PDT, ID: 21581777

rhandalthor:

So I need to add

<script>
function setDiv(){
document.getElementById("divTest").style.height = document.getElementById("myBody").offsetHeight+"px";
}
</script>

to the index or header?
This to the body tag:

And this to my imagekeeper tag? :

05.16.2008 at 04:36AM PDT, ID: 21581813

Rank: Guru

JohnSixkiller:

The <script> part of the code can be placed practically everywhere, but is better to keep it HEAD section.

                       
         
           
           
             <html>
 <head>
  <script>
     function setDiv(){
       document.getElementById("divTest").style.height = document.getElementById("myBody").offsetHeight+"px";
     }
  </script>
 </head>
 
 <body id='myBody' onload='setDiv()'>
   <div style='position:absolute;height:100%;width:100%;' id='myDiv'>This is imagekeeper</div>
    .. rest of your HTML code ...
 </body> 
</html>

           
         

Open in New Window

05.16.2008 at 04:59AM PDT, ID: 21581895

rhandalthor:

Well, I think I still am misinterpreting your snippet of code. Maybe you can have a look at the site. I see a horizontal bar again and I get this Firebug error:
document.getElementById("divTest") has no properties
http://www.onboardcouriers.eu/verhoijsen/
Line 262
I guess I need to add divTest somewhere, not just change imagekeeper to myDiv and changing its css to the css code you added? Sorry if I am a bit slow. Been at it all day and it is almost 19:00 here ;-)

05.16.2008 at 05:41AM PDT, ID: 21582132

Rank: Guru

JohnSixkiller:

No need to be sorry. 19pm your time, 14pm is my and your in better condition than I am :). Of course the name of the imagekeeper DIV must be the same as in that function.

document.getElementById("myDiv").style.height = document.getElementById("myBody").offsetHeight+"px";

Sorry for mismatch.

John

05.16.2008 at 07:33AM PDT, ID: 21583080

rhandalthor:

Well I did that. Thanks for the adjustment. Now I do not see any errors any more but neither do I see the floating images in FF. In IE7 I do see them, but they still make the browser window larger and after a while the content disappears?!! Too bad huh?! This seems to be harder than I thought! Please check my test site to see what I missed. Maybe something silly as a " or a '. Still hanging in there, trying to get it done....

05.16.2008 at 09:28AM PDT, ID: 21584174

Rank: Guru

JohnSixkiller:

Well, a little bit chaotic for me. it took me quite a while trying to find out possible solution. However:

1) remove function, in this case it is not needed
2) you have enclosed all document with imagekeeper div
just place

after the BODY tag a put only images into it. resp. load them to it.

I cant see the images in the soucre code,which means they are loaded externally. And very likely not into "myDiv"
3) to scroll your posts "overflow:auto" on parent div will be enough. Scrollbars will belong to parent div

Maybe you can setup layout of your page without floating images, adjust scrolling and readd floating content.

John

05.16.2008 at 07:57PM PDT, ID: 21587823

rhandalthor:

Yes all images are loaded from an external folder. The javascript and css as well. I f need be I could paste the javascript here for you....
Well, the solution you gave me is beautiful in Firefox 2.0.0.14, but in Internet Explorer 7 there is no horizontal scroll bar. When I add overflow:auto to another divider #wrap I will get scrolling capabilities there, but yeah that's just ugly. In FF I get two.
When I add overflow:auto to #giant all images start floating on top of the content and I still don't see a horizontal scroll bar in IE7. Too bad so many people use IE.
I am going to consider you last suggestion.

05.21.2008 at 07:32PM PDT, ID: 21620483

rhandalthor:

Well John Sixkiller, I am going for overflow:hidden; . The images will have to stay.I have made some changes in the meanwhile... I added a sidebar and widgetized it. It looks good in Firefox and Safari, but not yet in Internet Explorer 7. In IE7 the container is floating right somehow. It should be in the center because I added a divider all around the others with width:60%; .I must have made a CSS error. Could you have one final look? Because of all the changes I erased/changed some CSS. Now I am missing something...

05.21.2008 at 07:37PM PDT, ID: 21620498

rhandalthor:

Oh and the font color is a lot vaguer in IE7 as well. I have no clue why.

P.S. I added some of the CSS code.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:

           
           
             body { 
font-family:Helvetica, Arial, Geneva, sans-serif;
font-size:12px;
/*background:#f8f8f3 url(images/bbg.png) repeat-x;*/
color:#0066FF; /*#666;*/
margin:0;
padding:0;
text-align:center;
 }
 
 .twoColElsRtHdr #container { 
	width: 56em;  
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border: 1px solid #000000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
 
#giant { /*added for positioning huls*/
width:60%;
margin:auto;
}
 
#container { /*container*/
width:56em; /*820px*/
padding:0;
margin:0 auto; /*added*/
z-index:1002; /*added*/
position:absolute; /*added*/
opacity:0.8; /*added*/
filter:alpha(opacity=30); !important
text-align:left; 
background:#fff;
height:100%;/*added maybe no horizontal scrolling*/
border:8px solid #fff;
margin:0 13em 0 10px;
padding:0; /*margin: 0 auto;  paddin:0*/
}
 
.twoColElsRtHdr #sidebar {
	float: right; 
	width: 22em; /* since this element is floated, a width must be given */
	/*background: #EBEBEB;*/ /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 0; /* top and bottom padding create visual space within this div */
}
 
.twoColElsRtHdr #sidebar h3, .twoColElsRtHdr #sidebar1 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}
 
.twoColElsRtHdr #mainContent {
  	margin: 0 23em 0 5px; /* the left margin will look best if you match the padding amount to the header and footer. */
} 
 
.entry {
background:#fff;
line-height:19px;
text-align:left;
margin: 0 13em 0 10px; 
padding:0 10px; /*5px*/
margin:auto;
 
}
 
a:hover {
text-decoration:none;
color:#666;
border:none;
 /*cursor:crosshair;*/ 
}
 
 
 
#top {
background:#fff;/*#f1efe7;*/
height:26px;
line-height:26px;
margin:0 auto;
padding:0 5px;
z-index:1003; /*added*