PDA

View Full Version : help with Arie's script



ajfmrf
12-10-2012, 01:47 AM
I started with this:
http://fofwebdesign.co.uk/template/_...mes/index.html

and so far am here:
http://www.web-user.info/arie/index.html

The last test link.test 4 is to my webpage.It will not load the page as you can see.

I will try and link to it as a regular link next but I don't know if it will load it into the div as the other links do.

bernie1227
12-10-2012, 04:40 AM
The issue is that you've got this error:


Origin http://www.web-user.info is not allowed by Access-Control-Allow-Origin.

The issue and workaround are explained in detail here:
http://stackoverflow.com/questions/9327218/access-control-allow-origin-not-allowed-by

Another issue is the 403 error on the page:


Failed to load resource: the server responded with a status of 403 (Forbidden) http://web-user.info.index/

molendijk
12-10-2012, 09:51 AM
Hello Bud,
Since you want to load the pages in an iframe, you'd better replace:

if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html'){setTimeout("$('#test').load(document.URL.substring(document.URL.indexOf('?')+1,document.URL.length))",150)}
with:

if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html' && document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!=''){$('#test').append('<iframe style="position:absolute; width:100%; height: 100%" frameborder="0" src="'+document.URL.substring(document.URL.indexOf('?')+1,document.URL.length)+'"</iframe>')}

Also, the files you want to load shouldn't 'end' with 'index.html', not even with a '/', because of the first lines of the script. In your case, that last link would be:

<a href="index.html?http://web-user.info/search/business">TEST 4</a>
I tested it: it works.

Good luck,
Arie.

molendijk
12-10-2012, 10:19 AM
Hi Bud again,
I looked at your site (the official one) in more detail. It's working OK, except that the address bar doesn't change when the visitor goes from one page to another. So the separate pages cannot be bookmarked.
If you modify your site along the lines I indicated, this won't be a problem anymore.
Arie.

ajfmrf
12-10-2012, 06:25 PM
Okay,Arie,if you can spare a few minutes can you explain what these parts are for and what they do?


<script>
$(document).ready(function() {
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index.html'){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html' && document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!=''){$('#test').append('<iframe style="position:absolute; width:100%; height: 100%" frameborder="0" src="'+document.URL.substring(document.URL.indexOf('?')+1,document.URL.length)+'"</iframe>')}
});
</script>

It looks like there is four parts??

( I am not sure what I did wrong here)

ajfmrf
12-10-2012, 06:30 PM
Okay,Arie,if you can spare a few minutes can you explain what these parts are for and what they do?


<script>
$(document).ready(function() {
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index.html'){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index.html?home.html')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html' && document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!=''){$('#test').append('<iframe style="position:absolute; width:100%; height: 100%" frameborder="0" src="'+document.URL.substring(document.URL.indexOf('?')+1,document.URL.length)+'"</iframe>')}
});
</script>


It looks like there is four parts??

byw here is what I have so far http://www.web-user.info/arie/index2.html

molendijk
12-10-2012, 08:55 PM
Hello Bud,

The first line:

if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index.html'){window.location.replace('index.html?home.html')}
Meaning:
If the part after the last '/' in the address bar simply is index.html, then replace index.html with index.html?home.html.
This is needed to put your starting page (which used to be home.html) in the iframe right from the start. (But your changed things, see below).

The second line:

if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index.html?home.html')}
Meaning:
If there's nothing after the last '/' in the address bar, then do the same as above.
This too is needed to put your starting page (which used to be home.html) in the iframe right from the start. (But your changed things, see below)

The third line (there are only 3 lines!)

if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index.html' && document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!=''){$('#test').append('<iframe style="position:absolute; width:100%; height: 100%" frameborder="0" src="'+document.URL.substring(document.URL.indexOf('?')+1,document.URL.length)+'"></iframe>')}
The if-part is a repetition of the 2 first lines, just to be sure. The relevant part is (using jQuery):

{$('#test').append('<iframe style="position:absolute; width:100%; height: 100%" frameborder="0" src="'+document.URL.substring(document.URL.indexOf('?')+1,document.URL.length)+'"></iframe>')}
Meaning:
Append to the div having id="test" a full size iframe that loads a file corresponding to: document.URL.substring(document.URL.indexOf('?')+1,document.URL.length).
The string for this file represents what you put after '?' in the links, in your main file.
By the way there was a typo in the last line. I had forgotten to put the red '>' above.

Now, as to your second attempt: the reason why your http://www.web-user.info/arie/index2.html does not contain an iframed page right from the start is that your main page is called index2.html now (there's no index.html anymore). So in your code, you should replace all index.html with index2.html. Moreover, ?home.html does not make sense anymore, because in http://www.web-user.info/arie/index2.html there's no page called home.html. The part to the left of '?' should correspond with your main file (which is index2.html now), and the part after '?' should correspond with the name of a file you want to put in the iframe right from the start. It could be anything existing, like http://web-user.info/search/business.
So in your new code, replace each index.html with index2.html, and replace your script with this:


<script>
$(document).ready(function() {
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)=='index2.html'){window.location.replace('index2.html?http://web-user.info/search/business')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)==''){window.location.replace('index2.html?http://web-user.info/search/business')}
if(document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!='index2.html' && document.URL.substring(document.URL.lastIndexOf('/')+1,document.URL.length)!=''){$('#test').append('<iframe style="position:absolute; width:100%; height: 100%" frameborder="0" src="'+document.URL.substring(document.URL.indexOf('?')+1,document.URL.length)+'"></iframe>')}
});
</script>

That should do it (hope there aren't typos anymore).

Good luck,
Arie.
(It's not difficult, really; what is needed is just a little bit of perseverance).

ajfmrf
12-11-2012, 01:31 AM
Arie,the index2.html is a test file so I will end up using the index.html when I make these changes to the site permenant.

I am about to print this all out to read and make the required changes when I update the real page.I will wait tofr your response to this post for any relevant changes you may think need to be done.

But more important I am going to watch the Patrots play the Texans.

I am a big Patriots fan and am anxious for this game.

I will get to this stuff probally tomorrow-:D

ajfmrf
12-11-2012, 06:04 AM
Okay,I will be using the file as the index.html in my directory.So I think,if I understand correctly that instead of changing the script to account for the index2.html all I need to do is set it to start with the http://web-user.info/search/business as the page it has to start with that already loaded in the frame.

Now my next question is a big one.I want to change the css to this to make it centered in any browser and also add a div on the top.something like what I have here now http://www.web-user.info/arie/index2.html .I am not used to using what you did for positioning things and will need to mess with things alot.lol

I want to put my banner and the time date at the top like I have here:http://www.web-user.info/test.html

So I am attempting to make those changes without messing things up.And if you knew my luck,you would wish me well(Murphy's law is my big brother and is always hanging around me-lol)

ajfmrf
12-11-2012, 07:10 AM
Well, I messed things up somewhere and the pages no longer load into the frame.

It did before but not now.
http://www.web-user.info/arie/index2.html

ajfmrf
12-11-2012, 09:41 AM
I got it working here:

http://www.web-user.info/iframes/index.html

But I don't understand why the wrapper border is where it is.

I was trying to center the whole thing but I am totally confused as to what is happening here.

Beverleyh
12-11-2012, 10:42 AM
At the moment, you're using absolutely positioned divs inside absolutely positioned divs, which is inserting 2 batches of left-space created by left:21% and left:180px respectively - that's what you need to fix.

But first, the outer #wrapper is narrower than the combined width of the grey menu bar and the fake-iframe #test div within - increase that to 1200px for now and also give #wrapper a relative position so you can place elements within it absolutely;
#wrapper {
border:1px solid red;
width:1200px;
height:1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
Next, tackle the position of #test. We know that the grey menu bar is 200px wide, so change left:21%; to left:200px; (so they sit flush alongside each other) and remove right:20%; altogether.

Now for the grey menu bar. Change left:180px; to left:0, and change top:80px; to top:10%; (to match #test for now, but you can change the top:?% on both to suit)

This div - <div style="position:relative; text-align:left"> - above your list of links - you can remove.

Your body HTML should now look something like this;
<div id="wrapper">

<div id="test" style="position:absolute; left:200px; top:10%; bottom:10%; width:980px; background:#fff; border:10px solid #dedede;"></div>

<div style="position:absolute; left:0; top:10%; bottom:0; width:200px; height:580px; padding-top:20px; background:#dedede; font:16px verdana;">

<a href="index.html?http://web-user.info/search/business"> Business</><br>
<a href="index.html?http://web-user.info/search/cars">Cars</a><br>
<a href="index.html?http://web-user.info/search/charity">Charity</a><br>
<a href="index.html?http://web-user.info/search/coupons">Coupons</a><br>
<a href="index.html?http://web-user.info/search/entertainment">Entertainment</a><br>
<a href="index.html?http://web-user.info/search/funny">Funny</a><br>
<a href="index.html?http://web-user.info/search/gadgets">Gadgets</a><br>
<a href="index.html?http://web-user.info/search/games">Games</a><br>
<a href="index.html?http://web-user.info/search/gov">US Government</a><br>
<a href="index.html?http://web-user.info/search/health">Health</a><br>
<a href="index.html?http://web-user.info/search/images">Images</a><br>
<a href="index.html?http://web-user.info/search/movies">Movies</a><br>
<a href="index.html?http://web-user.info/search/music">Music</a><br>
<a href="index.html?http://web-user.info/search/news">News</a><br>
<a href="index.html?http://web-user.info/search/personalfinance">Personal Finance</a><br>
<a href="index.html?http://web-user.info/search/political">Political</a><br>
<a href="index.html?http://web-user.info/search/realestate">Real Estate</a><br>
<a href="index.html?http://web-user.info/search/reference">Reference</a><br>
<a href="index.html?http://web-user.info/search/restaurant">Restaurant</a><br>
<a href="index.html?http://web-user.info/search/science">Science</a><br>
<a href="index.html?http://web-user.info/search/shopping">Shopping</a><br>
<a href="index.html?http://web-user.info/search/social">Social</a><br>
<a href="index.html?http://web-user.info/search/sports">Sports</a><br>
<a href="index.html?http://web-user.info/search/travel">Travel</a><br>
<a href="index.html?http://web-user.info/search/video">Video</a><br>
<a href="index.html?http://web-user.info/search/videogames">Video Games</a><br>
<a href="index.html?http://web-user.info/search/weather">Weather</a><br>

</div>
</div>
</div>
I *think* this is more like the visual you're trying to create, so see how that turns out and tweak to your liking.

BTW - Only tested in IE9 so make sure to check what's happening in other browsers.

Hope that helps

ajfmrf
12-11-2012, 12:05 PM
Thanks Beverleyh,That worked great and also made it easy to add a header with my banner as well as a date and time thing too.

Arie,if you see this I would like to know what I need to add to give you credit for your script.

Get back to me and I will add whatever you want me to add.

here is the finished demo page

http://www.web-user.info/iframes/index.html

I will be setting up my main search page this afternoon after I get some sleep.

This was a great script Arie and I want to thank you for it.

molendijk
12-11-2012, 12:41 PM
Arie,if you see this I would like to know what I need to add to give you credit for your script.
Well Bud, that's not realy necessary, but if you insist, you could put the following in the head:
/* Script by Arie Molendijk - http://mesdomaines.nu/music */
I'm glad you got it finished.
Arie.

ajfmrf
12-13-2012, 01:09 AM
I used the The W3C Markup Validation Service , validator.w3.org/ and got these Notes and Potential Issues:

No Character Encoding Found! Falling back to UTF-8.

No Character encoding declared at document level
No character encoding information was found within the document, either in an HTML meta element
or an XML declaration

How do I fix either of them? I have no clue about the UTF-8 part and not much more regarding the meta-thing about it...

Any direction would be greatly appreciated.

bernie1227
12-13-2012, 01:30 AM
Since you're using HMTL 4.01 stick this in the head:


<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">