The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

5 Pages V « < 2 3 4 5 >  
Reply to this topicStart new topic
> Show 1 div with PREV - NEXT link, hiding all others, Show 1 div with PREV - NEXT link, hiding all others
Christian J
post Jan 18 2009, 01:04 PM
Post #61


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 18 2009, 05:27 PM) *

QUOTE
All content is within the page itself.
Nice!
Not exactly what I had in mind but Nice!

Note that such a page would take a lot of time to download, especially if it contains lots of large images.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 18 2009, 01:22 PM
Post #62


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



OK; thanks.
I'll stick with what I have for now but with the possibility of moving ahead with html 4.01 strict in the future.

Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 18 2009, 01:24 PM
Post #63


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



QUOTE
Note that such a page would take a lot of time to download, especially if it contains lots of large images.
It's what I had in mind as well.

This post has been edited by Baffled in Baltimore: Jan 18 2009, 01:25 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 18 2009, 01:28 PM
Post #64


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



oh well, it was just a suggestion which seemed like you wanted it, with next/previous possibilities.

Anyway, I regularly surf to Smashing Magazine for lots of usefull resources, from which I found the Coda-Slider script.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 18 2009, 04:15 PM
Post #65


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



QUOTE(Frederiek @ Jan 18 2009, 01:28 PM) *

oh well, it was just a suggestion which seemed like you wanted it, with next/previous possibilities.

Anyway, I regularly surf to Smashing Magazine for lots of usefull resources, from which I found the Coda-Slider script.

Like I said b4, it,s a nice script and maybe useful at some point, but I need to avoid scripts or anything that would complicate maintenance and cause bandwidth issues.

Simplify, simplify, and simplify.

I kind of like Dynamic Drive for certain things. It is where I got the menu-slider script I use for the catalog pages of my site. When the user hovers mouse to it, it opens with links to other pages. Although the script is part of each page that uses it, (and acceses an external jscript). it is small-enough and the file does not corrupt when I use html-tidy in my editor; many html files with script often does.

Thanks again for your contribution; it is appreciated.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 19 2009, 08:38 AM
Post #66


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 18 2009, 05:19 PM) *

QUOTE
Will the Sidebar and Header always be the same, or will their content change depending on which JS-link that was clicked? (Main Content will of course change.)
Content - Always
Header - Mostly
Sidebar - 2 or 3 for Catalog Navigation (in build).

Would it be possible to put all Header content (including variations) and all Sidebar menus on the index/home page (so that they are always visible there)? If so I have an idea, but must test it a little more first.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 19 2009, 09:52 AM
Post #67


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



QUOTE
Would it be possible to put all Header content (including variations) and all Sidebar menus on the index/home page (so that they are always visible there)? If so I have an idea, but must test it a little more first.

Actually, I believe this would be preferred.

Thank you

PS
If it will help, the style sheet can be found here

This post has been edited by Baffled in Baltimore: Jan 19 2009, 10:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 19 2009, 02:34 PM
Post #68


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



Here's a simple demo: http://hem.fyristorg.com/g-force/test/java...pt_SSI/foo.html

I've used both a hidden IFRAME and JS for this. The IFRAME is hidden from human users, but JS should still be able to read the contents of the index page through it (if both pages are on the same domain). If it doesn't work for some reason, browsers should at least be able to use the link to the Home page.

I've tested in latest MSIE, Firefox, Safari and Opera (all in Windows) but try more browsers/versions before using this. There could be some serious bugs, for example I had to fix one that caused an infinite loop in MSIE7 (so I had to close the browser from Windows Task Manager).

All included DIVs will end up at the end of the page by default, but this can be changed to the beginning. You can also position them with CSS.

Installation

1. On the index/home page, add everything that you want included on other pages in separate DIV elements, and give each DIV its own ID. In the future you'll only edit menus on this page.

2. On each page where you want to include things, add the following HTML:

CODE
<iframe onload="include('header','menu1','menu2');"
src="/" width="1" height="1" name="iframe"
style="position: absolute; left: -100px;"></iframe>
<a href="/">Home</a>
<script type="text/javascript" src="include.js"></script>

Both the IFRAME and the "Home" link should point to the index/home page (i.e., "/").

Put the IDs of the DIV elements you want included from the index page in here:

CODE
onload="include('header','menu1','menu2');"

(the example above loads DIVs with the IDs 'header', 'menu1' and 'menu2'). You can add as few or as many as you want, as long as they exist on the index/home page. If one doesn't exist, none will show up.

3. Put the following in the external JS file "include.js":

CODE
var finished;
function include()
{
    if(finished!='yes')
    {
        // first making an array prevents a bug in MSIE:
        var codeblock=new Array();
        for(var i=0; i<include.arguments.length; i++)
        {
            var div_content=top.iframe.document.getElementById(include.arguments[i]).innerHTML;
            codeblock.push('<div id="'+include.arguments[i]+'">'+div_content+'</div>');
        }

        for(var i=0; i<codeblock.length; i++)
        {
            document.body.innerHTML+=codeblock[i];
        }
    }
    finished='yes'; // prevents an infinite loop bug in MSIE
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jan 19 2009, 02:48 PM
Post #69


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(Christian J @ Jan 20 2009, 04:34 AM) *


Hmm, doesn't appear to "work" for me (though I've no idea what "work" means)...

QUOTE


CODE
<iframe onload="include('header','menu1','menu2');"

...

function include()
{
...



Well, you have declared include() with no arguments, but have called it with three. Shurely shomething wrong here?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 19 2009, 06:20 PM
Post #70


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Jan 19 2009, 08:48 PM) *

Hmm, doesn't appear to "work" for me (though I've no idea what "work" means)...

Which browser/version? "Work" means content from the "index.html" file is included in "foo.html".

QUOTE

you have declared include() with no arguments, but have called it with three. Shurely shomething wrong here?

No, they are used in the arguments array, as explained here: http://www.javascriptkit.com/javatutors/rfunction3.shtml
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 19 2009, 06:23 PM
Post #71


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Thanks guys:

I'll try to do something with all this good info when I can.
For now, my eyes are bothering me too much from strain so I have to break from this a bit and my server is acting retarded again. Been trying to upload some files for demo use but it keeps stalling.

QUOTE
Brian
Hmm, doesn't appear to "work" for me (though I've no idea what "work" means)...

Isn't work a 4-letter word???

Upload completed: Finally. Now I can rest a bit.

Another idea
Just an Idea I was toying with; I added a dom image rollover effect to the gallery pages. The idea is for the image to rollover to a bigger image when hovered. After trying it out, it seems somewhat obtrusive when an image is clicked from the thumbs gallery;

I don't know; suggestions?

Thanks again for all the good input fellas; it is appreciated


This post has been edited by Baffled in Baltimore: Jan 19 2009, 07:09 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 19 2009, 07:20 PM
Post #72


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 20 2009, 12:23 AM) *

Just an Idea I was toying with; I added a dom image rollover effect to the gallery pages. The idea is for the image to rollover to a bigger image when hovered. After trying it out, it seems somewhat obtrusive when an image is clicked from the thumbs gallery;

Like here: http://www.wjstewart-associates.com/demo/a...avel.html#37296 ? Must agree about the obtrusiveness, especially since it makes all the text reflow. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 20 2009, 08:02 AM
Post #73


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



QUOTE(Christian J @ Jan 19 2009, 07:20 PM) *

QUOTE(Baffled in Baltimore @ Jan 20 2009, 12:23 AM) *


Like here: http://www.wjstewart-associates.com/demo/a...avel.html#37296 ? Must agree about the obtrusiveness, especially since it makes all the text reflow. blink.gif


Thanks;
It was Just a thought... Maybe a lame one, but a thought.
Loose the Rollover and go with a "Click for bigger view" (loads jpg in new window)?

This post has been edited by Baffled in Baltimore: Jan 20 2009, 08:10 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 20 2009, 12:43 PM
Post #74


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



QUOTE(Christian J @ Jan 19 2009, 02:34 PM) *

Here's a simple demo: http://hem.fyristorg.com/g-force/test/java...pt_SSI/foo.html

I've used both a hidden IFRAME and JS for this. The IFRAME is hidden from human users, but JS should still be able to read the contents of the index page through it (if both pages are on the same domain). If it doesn't work for some reason, browsers should at least be able to use the link to the Home page.

I've tested in latest MSIE, Firefox, Safari and Opera (all in Windows) but try more browsers/versions before using this. There could be some serious bugs, for example I had to fix one that caused an infinite loop in MSIE7 (so I had to close the browser from Windows Task Manager).

All included DIVs will end up at the end of the page by default, but this can be changed to the beginning. You can also position them with CSS.

Installation

1. On the index/home page, add everything that you want included on other pages in separate DIV elements, and give each DIV its own ID. In the future you'll only edit menus on this page.

2. On each page where you want to include things, add the following HTML:

CODE
<iframe onload="include('header','menu1','menu2');"
src="/" width="1" height="1" name="iframe"
style="position: absolute; left: -100px;"></iframe>
<a href="/">Home</a>
<script type="text/javascript" src="include.js"></script>

Both the IFRAME and the "Home" link should point to the index/home page (i.e., "/").

Put the IDs of the DIV elements you want included from the index page in here:

CODE
onload="include('header','menu1','menu2');"

(the example above loads DIVs with the IDs 'header', 'menu1' and 'menu2'). You can add as few or as many as you want, as long as they exist on the index/home page. If one doesn't exist, none will show up.

3. Put the following in the external JS file "include.js":

CODE
var finished;
function include()
{
    if(finished!='yes')
    {
        // first making an array prevents a bug in MSIE:
        var codeblock=new Array();
        for(var i=0; i<include.arguments.length; i++)
        {
            var div_content=top.iframe.document.getElementById(include.arguments[i]).innerHTML;
            codeblock.push('<div id="'+include.arguments[i]+'">'+div_content+'</div>');
        }

        for(var i=0; i<codeblock.length; i++)
        {
            document.body.innerHTML+=codeblock[i];
        }
    }
    finished='yes'; // prevents an infinite loop bug in MSIE
}



I think we have the right orchard, but the wrong tree; what is proposed here is creating new pages with the variations.
What is needed is; go from THIS page to THIS page (Note the menu in sidebar and Heading; thay are different. The content changes with new menu in sidebar) without creating new pages. Can this be accomplished using this or any other script?

Or did I miss-read the intent of the above script?

PS
MENU AND CONTENT PAGES ARE THEIR OWN HTML PAGES AS WELL; BUT CURRENTLY NOT USED:
(This was done to allow external file targeting from other pages)

This post has been edited by Baffled in Baltimore: Jan 20 2009, 01:32 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 20 2009, 04:19 PM
Post #75


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 20 2009, 06:43 PM) *

Or did I miss-read the intent of the above script?

Maybe it's me that misunderstood? unsure.gif

The idea is that you change the include function's parameters (as shown below) depending on what content (headers, menus etc) you want to include on a page. E.g., one page might include "header1" and "menu2":

CODE
onload="include('header1','menu2');"

while another instead uses "header2" and "menu1":

CODE
onload="include('header2','menu1');"

...etc (as long as the included DIVs exist "hard-coded" on the index page).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 22 2009, 09:56 AM
Post #76


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



QUOTE(Christian J @ Jan 20 2009, 04:19 PM) *

QUOTE(Baffled in Baltimore @ Jan 20 2009, 06:43 PM) *

Or did I miss-read the intent of the above script?

Maybe it's me that misunderstood? unsure.gif

The idea is that you change the include function's parameters (as shown below) depending on what content (headers, menus etc) you want to include on a page. E.g., one page might include "header1" and "menu2":

CODE
onload="include('header1','menu2');"

while another instead uses "header2" and "menu1":

CODE
onload="include('header2','menu1');"

...etc (as long as the included DIVs exist "hard-coded" on the index page).


This is a great idea but showing issues:
  • Style sheets in use employ positioning as one of their functions; this would make it difficult to modify for adaptation of proposed theme. (Each new Div id will require its own declaration in the CSS)
  • Menus and search engines in sidebar currently target the "content" iframe and works well using this element. The proposed theme does seem to work with directly-loaded content into their named divs but fails to work with anything targeted from another area of the page; a menu2 link for example, will not target the content div although the div is named /ID'd as content.
  • Menus and other content using external js fail to function properly when loaded into a sheet using this scheme. Don't know why, they just don't see the external js they rely on.
Iframes are great for many things and reasons but poses a problem for html strict; hence the need to discontinue their use. How can a div be sugar-coated to function like an iframe for targeting external content?

This post has been edited by Baffled in Baltimore: Jan 22 2009, 10:45 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 22 2009, 03:03 PM
Post #77


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 22 2009, 03:56 PM) *

[*]Style sheets in use employ positioning as one of their functions; this would make it difficult to modify for adaptation of proposed theme. (Each new Div id will require its own declaration in the CSS)

You can also "hard-code" empty DIVs anywhere you want in the product pages where the header and menu content should be inserted. But then you must decide from the beginning on which (and how many) such containers you want to use (and rewrite the script accordingly).

QUOTE
[*]Menus and search engines in sidebar currently target the "content" iframe and works well using this element. The proposed theme does seem to work with directly-loaded content into their named divs but fails to work with anything targeted from another area of the page; a menu2 link for example, will not target the content div although the div is named /ID'd as content.

Didn't understand that. mellow.gif

QUOTE
[*]Menus and other content using external js fail to function properly when loaded into a sheet using this scheme. Don't know why, they just don't see the external js they rely on.

Could you make a test page showing this? One problem I can think of might be that your existing menu scripts are made to work with iframes.

QUOTE
Iframes are great for many things and reasons but poses a problem for html strict;

On the contrary: writing Strict HTML is not an end by itself (writing valid HTML is good, though). The reason for avoiding iframes is the problems they cause, as mentioned earlier.

QUOTE
How can a div be sugar-coated to function like an iframe for targeting external content?

With HTML alone it can't.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 22 2009, 03:32 PM
Post #78


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(Baffled in Baltimore @ Jan 22 2009, 03:56 PM) *
How can a div be sugar-coated to function like an iframe for targeting external content?
QUOTE(Christian J @ Jan 22 2009, 01:03 PM) *
With HTML alone it can't.
And frankly, using JavaScript to make div elements act like iframe elements isn't really any better than just using iframe elements to begin with. In addition to the normal problems associated with frames (inline or regular), you add the dependency on JavaScript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 22 2009, 06:05 PM
Post #79


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



QUOTE(Darin McGrew @ Jan 22 2009, 09:32 PM) *

And frankly, using JavaScript to make div elements act like iframe elements isn't really any better than just using iframe elements to begin with.

With IFRAMES all pages would be IFRAME-dependent, but in my system the index page doesn't need any IFRAMEs. Also you avoid the fixed-width of IFRAME containers, as well as their scrollbars.

QUOTE
In addition to the normal problems associated with frames (inline or regular), you add the dependency on JavaScript.

Not dependency, since there's a normal link back to the index page.

That said I should again emphasize that the better solution is a server-side one, even if it means changing web host.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 23 2009, 04:02 PM
Post #80


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Gentlemen; hello again.
I apologize for the brief hiatus.

I wish to thank you all again for your advice, comments and support. Due to health issues, I must put this on a back-burner for now and digress. In the mean time, remaining the status-quo is probably more apropos. Apologies also conveyed for taking everyone's time.

Upon my return, focus will probably be directed to making the move to the FTP host I currently have an account with. This may solve more problems than not...

Thank you all again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

5 Pages V « < 2 3 4 5 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th April 2024 - 03:35 AM