Javascript (fadeslideshow) is blocked on IE

[Beverleyh]

It might look like a lot but over half of that post is just me trying to explain stuff for you and making a few allowances for your particular setup (eg, jQuery noconflict considerations, etc)

The basics for installing Fast Edit are really very simple - split a web page into 3 parts and paste a few lines of code in the right places. The rest of the logic relies on the experience of the developer. When you've been making websites a little longer, things will naturally make more sense - for example, you'll feel more comfortable using a common header, footer and menu file, and you'll realise that the benefits outweigh the "cons".

I think the belief of newer web designers (and I mean absolutely no disrespect) is that it seems quite alien to first build a lovely web page in the one html file, but then be asked to break it down into separate php files that don't easily open in a browser anymore. It almost seems like you're destroying something by putting it into a strange format that doesn't 'work', right? Not without the help of a server running php anyhow. But once you start using php, even just to use the include() concept, you'll never look back

If you like Fast Edit and plan to keep it in mind for your next project, you'll be at an advantage because next time you can build your web layout/template into the header and footer files from the start, which will cut out a big chunk of work. Its much easier to build gradually and test regularly in a CMS throughout the design process than it is to convert and restructure a website that's already complete, and with Fast Edit using an open header and footer file, it can support just about anything that the developer wants to build into it. In fact Fast Edit is probably much more versatile than it appears at first glance

[Wettergott]

i followed your instructions of the last page (only the first steps until "At this point, start/refresh Server2Go and you'll see your home page instead of the Fast Edit demo."). but i don't see my homepage. what i see is an ugly car crash between my homepage and the demo page of fast edit. which files do i have to delate or overwrite that there is only my page?

[Beverleyh]

That's only up to the point of putting your website into the Server2Go htdocs folder. I've reviewed my instructions, and they seem perfectly clear (to me), but maybe you should try a different approach.

OK, from the beginning. Before you can integrate your website with Fast Edit, you have to install it to the root of your website. We're only using Server2Go because you don't yet have a web host, but for all intents and purposes, Server2Go is now your web host server. You need to put your website on the server first, so ignoring the fact that Fast Edit is already there, just copy the whole of your website (folder structure, files, everything) into the htdocs folder of Server2Go. This is the equivelent of uploading your website files to an online web host, except that the hosting server is sat locally on your computer.

This will mean that you now have 2 index pages in the htdocs folder - an "index.php" page, which is the one that came with Fast Edit, and your "index.html" page. Just delete the "index.php" file and rename your html one to have the .php extension.

Now paste this CSS into your stylesheet;

/* IMPORTANT - h1.title and h2.sub-title are custom classes assigned by the title and sub-title buttons in the WYSIWYG toolbar */
/* Styling for these must be included in your default site stylesheet otherwise the user wont be able to create main or sub-titles in their web page content */
h1.title { font-family:Palatino Linotype, Book Antiqua, Palatino, serif; font-size: 16pt; border-bottom:1px dotted #999; }
h2.sub-title { font-family:Palatino Linotype, Book Antiqua, Palatino, serif; font-size: 16pt; }

That should get you to the "At this point, start/refresh Server2Go and you'll see your home page instead of the Fast Edit demo." step where you can see your home page in Server2Go.

Either way, following my first instructions or these will get you to the same point. Which stylesheet you use doesn't really matter but this way will leave you with the "fadeslideshow.js" file in the htdocs folder, so refer back to my previous instructions to move that into the "includes" sub-folder.

You should now continue following the instructions from my previous post http://www.dynamicdrive.com/forums/s...026#post293026 (from where step 6 is mentioned)

[Wettergott]

no i implied my homepage into fast edit as you said.

the javascript isnt working any more. i did everything you said. every link is correct, but maybe in the block:


<title><?php echo $dynamic_title ;?> : <?php echo $website_title ;?></title>
<link rel="stylesheet" type="text/css" href="fast_edit/editable_site_styles.css" />
<link rel="stylesheet" type="text/css" href="fast_edit/styles/fast_edit.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="fast_edit/styles/fast_edit_ie.css" /><![endif]-->
<?php if (isset($_SESSION['username'])) { ?>
<script type="text/javascript" src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script type="text/javascript" src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_standalone.js.php"></script>
<script type="text/javascript" src="fast_edit/js/fast_edit_toolbar.js"></script>
<?php } ?>
<script type="text/javascript" src="algorithmus.js"></script>
<script type="text/javascript" src="fast_edit/js/jquery.cookie.js"></script>
<?php if (isset($_SESSION['username'])) { ?>
<script type="text/javascript" src="fast_edit/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="fast_edit/js/jquery.tablesorter.pager.js"></script>
<?php } ?>
<script type="text/javascript" src="fast_edit/js/fast_edit_functions.js"></script>

is something incorrect? (the line <script type="text/javascript" src="algorithmus.js"></script> is just for the code on the google... homepage. i copied the code into a own file, so that i am independent of another homepage.

---------------------
2nd problem: the text is there twice. one text is allways centered, the other one is allways on the same point.

3rd "problem": yes, i want my buttons to be universal, and i would also have a blank button for it. but i dont now how to put exactly the same text on the buttons.

[Wettergott]

i was trying to change the text. now the text stays anywhere behind the pictures on the left side of the homepage. that was the thing im afraid about. to loose full control about the style. now im in a programm i cant handle and dont know how to change simple things as a text.

[Wettergott]

lol, but the javascript is working while im logged in
when im logged out it doesnt work

[Beverleyh]

no i implied my homepage into fast edit as you said.

the javascript isnt working any more. i did everything you said. every link is correct, but maybe in the block:


<title><?php echo $dynamic_title ;?> : <?php echo $website_title ;?></title>
<link rel="stylesheet" type="text/css" href="fast_edit/editable_site_styles.css" />
<link rel="stylesheet" type="text/css" href="fast_edit/styles/fast_edit.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="fast_edit/styles/fast_edit_ie.css" /><![endif]-->
<?php if (isset($_SESSION['username'])) { ?>
<script type="text/javascript" src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script type="text/javascript" src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_standalone.js.php"></script>
<script type="text/javascript" src="fast_edit/js/fast_edit_toolbar.js"></script>
<?php } ?>
<script type="text/javascript" src="algorithmus.js"></script>
<script type="text/javascript" src="fast_edit/js/jquery.cookie.js"></script>
<?php if (isset($_SESSION['username'])) { ?>
<script type="text/javascript" src="fast_edit/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="fast_edit/js/jquery.tablesorter.pager.js"></script>
<?php } ?>
<script type="text/javascript" src="fast_edit/js/fast_edit_functions.js"></script>

is something incorrect? (the line <script type="text/javascript" src="algorithmus.js"></script> is just for the code on the google... homepage. i copied the code into a own file, so that i am independent of another homepage.

Where did <script type="text/javascript" src="algorithmus.js"></script> come from? I have no idea what this is and it wasnt in the markup that you originally posted.
What should be in place of that line is either;

<script type="text/javascript" src="fast_edit/js/jquery-1.4.2.min.js"></script>

or;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

(I said that you could use either in my previous instructions)

I also said the following which should fix the javascript slideshow conflict (it does for me in the test platform Ive setup);

One thing, as the slideshow uses jQuery in noconflict mode, you will notice that it stops working due to conflicts with the "fast_edit/js/fast_edit_functions.js" file. This is easily fixed. Just open the "fast_edit/js/fast_edit_functions.js" file and do a "search and replace all" function to replace all the "$" symbols with the word "jQuery". Alternatively, you can download this revised "fast_edit/js/fast_edit_functions.js" file here; Attachment 5014

2nd problem: the text is there twice. one text is allways centered, the other one is allways on the same point.

Sounds like you havent cut the text/content out of the home page. That implies that you've instead copied it into the "fast_edit/_content/index.txt" file, so it is still present twice on the page - once via the <?php include($contentpage);?>, and again via your original content, possibly with your <adresstext> tag still around it (that's not a valid tag by the way so, you should remove it.) Also be sure that you have literally just cut the "this is the most important part to change" text and not the <adresstext> tag or <div id="text"> tag that surrounds it. The Editor will strip illegal tags so if you've included those in the "fast_edit/_content/index.txt" file, the results will cause formatting differences.

3rd "problem": yes, i want my buttons to be universal, and I would also have a blank button for it. but i dont now how to put exactly the same text on the buttons.

Unfortunately you wont be able to do that with the text you have embedded on your menu buttons. You could look for something similar on Google Web Fonts http://www.google.com/fonts/ and install that on your site, but I'm not sure how well it will work.

i was trying to change the text. now the text stays anywhere behind the pictures on the left side of the homepage. that was the thing im afraid about. to loose full control about the style. now im in a programm i cant handle and dont know how to change simple things as a text.

Im sorry but I dont understand what you mean - I've setup a demo here and it's working fine. You shouldn't have lost any control of the style because you're using your original stylesheet (apart from the addition of the h1.title and h2.sub-title lines which will have no effect on the rest of your CSS).

[Wettergott]

1.
<script type="text/javascript" src="algorithmus.js"></script> and <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> is the same. i copied the code of the homepage into a file called "algorithmus.js". so my homepage doesnt allways have to link on this other homepage.

i replaced all the $ as you said. after it didnt work i replaced the whole file with yours. and....as i said, the javascript works when im logged in. this is confusing for me! it doesnt work when im logged out.

----------
2. can you show me how to make universal buttons? the nearly the same font style exists also on html code: font face="Monotype Corsiva", color: #a90338 (the only difference is, that i used a special color-flow on photoshop, which is hardly remarkable, so never mind!).

--------------
3. now i will look through the code, i guess i have cut/copied it uncorrectly, so let me check that.


by the way, thanks for yor help. u r really great and i hope u understand everything im writing

-wettergott

[Beverleyh]

1.
<script type="text/javascript" src="algorithmus.js"></script> and <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> is the same. i copied the code of the homepage into a file called "algorithmus.js". so my homepage doesnt allways have to link on this other homepage.

i replaced all the $ as you said. after it didnt work i replaced the whole file with yours. and....as i said, the javascript works when im logged in. this is confusing for me! it doesnt work when im logged out.

Replace;

<script type="text/javascript" src="algorithmus.js"></script>

with;

<script type="text/javascript" src="fast_edit/js/jquery-1.4.2.min.js"></script>

Also, you dont need to replace $ in this file (this is the jQuery Library). You need to replace $ in "fast_edit/js/fast_edit_functions.js". Just download the attachment and save it over the top of the file with the same name.

2. can you show me how to make universal buttons? the nearly the same font style exists also on html code: font face="Monotype Corsiva", color: #a90338 (the only difference is, that i used a special color-flow on photoshop, which is hardly remarkable, so never mind!).

You would need to use the original "includes/menu.html" file and then style it with this CSS - change the values to suit - I've included comments so you can see what each line is for;

ul.menu { 
list-style: none; /* remove default bullet points from menu list */
margin: 0; 
padding: 0; 
height: 100%; 
}
 
li.menu { /* add "float:left;" below to make the menu buttons sit horizontally */
margin: 0 1px; /* gap above and below buttons - "margin: 1px 0;" is the gap between buttons if horizontal */
padding: 0; 
text-align: center; /* alignment of text on button */
width: 150px; /* overall width of menu button */
}
 
li.menu a, li.menu a:visited { 
display: block; /* makes the whole button a link instead of just the text on it */
text-decoration: none; /* remove the underline from text hyperlinks */
font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
color: #a90338; /* color of text on button */
font-size: 12px; /* size of text on button */
line-height: 25px; /* height of each button */
width: 150px;  /* overall width of menu button (must be set here and in "li.menu" above) */
}
 
li.menu a {         
background: url("path/to/image/button.gif") repeat 0 0; /* optional image for button at rest */
padding: 5px 0px;
}
 
li.menu a:hover, li.menu a:active { 
background: url("path/to/image/button-hover.gif") repeat 0 0; /* optional image for button on hover */
}

However, I have to tell you that unfortunately, I do not have the time to keep writing step-by-step instructions and explaining things in detail. I really am very sorry, but I have other projects and work to concentrate on.

I understand (almost) everything you type so no worries there and I also appreciate that we must have been frustrating each other these past few days - I think I might be expecting a bit too much from you (this is your first website, right?), and I really don't want to put you off web design by overwhelming you with all these news concepts.

Anyway, I've been thinking about how I can make things much easier for you (and other people who are new to web design) and I've come up with something that;

• Runs completely in a back-end admin panel
• Doesn't need you to divide your page into a seperate header and footer file so your web pages stay complete
• Doesn't need you to copy and paste any extra scripts into your <head> section
• Let's you setup multiple editable regions per web page (if you want)

I'm calling it Fast Edit BE (Snippet Manager) - because it runs in the Back-End and manages/edits multiple content snippets.
The demo is here: http://fast-edit.co.uk/demo_besm/
The installation instructions are here: http://fast-edit.co.uk/installation_besm.php
You can download it via the black "Download Fast Edit BE (Snippet Manager)" button on the left

I wasn't going to officially release it for another few days but I think this will help us both as it will be easier for you to understand and it will free up my time to work on other things. I haven't left you in the lurch but I DO need to move away from this now. Fast Edit BE (Snippet Manager) is more like the kind of editor that you were looking for at the start of this thread (like Pulse) and I've tried to be much more in keeping with your original requirements.