Anyone here REAAAAALLY clever with CSS?

[AdamWathan]

I know my way around with CSS but I'm having an issue with the studio site I'm trying to design...

Basically, non-IE browsers don't support scrollball styles and I have an inline frame that needs to scroll. I found a solution to this and got an external scripted scrollbar that is stylable, no problem. I put that in an inline frame and set the borders/scrollbars on the frame to be invisible so it looks like the div pane that I created via CSS is the frame, but really it's within another invisible frame. This is necessary because the frame changes based on the navigation at the top of the page which targets that frame.

I don't like this work around though because if the user grabs the scrollbar to scroll and doesn't keep the cursor either on the scroll bar or within the inline frame, it stops scrolling, so you can't click the scrollbar and drag carelessly which is a bit annoying.

I then decided to put the pane on the main page itself and now it works fine, however, I can't target the contents of it and change it with the navigation links, the contents seem to be fixed and I can't figure out a way to do what I want.

Does anyone know of any way to use links to target other CSS classes and change their contents or make them visible/invisible or am I stuck using the pane within an IFRAME method?

 

[mick thompson]

im a more WYSIWYG man myself so im not too quick with coding, ive posted it on my yahoo answers account - ill post back if i get a reply dude, ps, didnt get a chance to go to the post office today, ill do it in the mornin 4 u.

 

[AdamWathan]

Thanks man! And no rush about the post office, whenever you get time dude! Thanks again.

 

[AudioPhile777]

I would have to take a look at what you're talking about to make any sense of it...

sounds like you just need to make the height and width 100% and set the overflow to auto... though, why do you care about scrollbar styles?

 

[Torniojaws]

Basically, non-IE browsers don't support scrollball styles

That's because scrollbar styles are not part of CSS

Does anyone know of any way to use links to target other CSS classes and change their contents or make them visible/invisible or am I stuck using the pane within an IFRAME method?

That is not something you should do with CSS. Use the include() function of PHP, though Perl and Python may have more efficient ways to do it. Or if the server doesn't support PHP, use JavaScript, but it's not recommended as most people rightly block JavaScript by default.

 

[Atheist]

Like Torniojaws said, Javascript can get you something that functions like iframe. Google something like "javascript content change".
But iframe concept is evil. You should really reload the whole page even if you want to change the content of only one div - except if it's something really small and not so important for your page. Iframes and content switching divs are not google friendly.

But I have to disagree on the comment that most people block JS. If they did, they couldn't do much on the internet. Youtube wouldn't work, this forum... etc. I heard about it many times, but I'm really not convinced.

 

[AdamWathan]

Thanks guys... any good places to read up on PHP coding? This is something I've never done before...

I don't want to reload the whole page because I have an embedded player on the page so reloading it means the person viewing it has to start and stop the audio every time they switch to a different page...

 

[Torniojaws]

But I have to disagree on the comment that most people block JS. If they did, they couldn't do much on the internet. Youtube wouldn't work, this forum... etc. I heard about it many times, but I'm really not convinced.

I mean blocked by default, not completely. Ie. plugins like NoScript for Firefox and similar, where the user can freely block/temporarily allow/permanently allow Javascript for every specific site. Of course sites that they frequent will have permanent rights, but it's a different case for a "random website" so to speak. They aren't so quick to allow them, unless they REALLY need to see the Javascript features. If your site is mainly based on Javascript content, the user will often just leave the site. So from a design point of view, it is not recommended to presume on Javascript being available.

 

[AdamWathan]

Can someone point me to a tutorial somewhere that allows you to define a space of content and change it with navigation buttons WITHOUT using an IFRAME? I checked Brett's Tower Studio site because he does something similar and even with his fancy ass page he's using an IFRAME.

Here's a quick knockup of what I'm working with, just overlaying the code over top of the sample image that dan weapon provided me yesterday (dude is THE MAN!) so ignore the horrid text overlap in the content frame, there is text on the image behind it that was used as a sample!

http://www.blindthevisionary.com/batcave

Site obviously isn't even close to remotely half done, this was just me getting a headstart and experimenting with the code...

Any way to do what I want without IFRAMES and without reloading for every page?

 

[Atheist]

I don't want to reload the whole page because I have an embedded player on the page so reloading it means the person viewing it has to start and stop the audio every time they switch to a different page...

Reloading is not an option then. You are right.

@Torniojaws:
I never had to block any javascript (except blocking resizing of the window and popups), so I don't really know much about those plugins.

@F0RBIDDEN:
I don't can't recall the third option for your problem. It's JS or irfame. I'll let you know if I remember something.

For PHP you can always start on w3schools or wikibooks.

 

[Torniojaws]

@Torniojaws:
I never had to block any javascript (except blocking resizing of the window and popups), so I don't really know much about those plugins.

It's mostly a safety precaution, so that no malicious code gets executed by itself. NoScript, for example, blocks all scripts on a new page until you give it rights. So if for example you by accident end up in a malicious website by whatever reason, it prevents it from running the scripts

I think php would be the simplest solution for the OP. Here's a mock-up code of what it could look like:

<a href="myfile.php?button=1">Link 1</a>
<a href="myfile.php?button=2">Link 2</a>
<a href="myfile.php?button=3">Link 3</a>

<?php
	  &#36;button = $&#95;GET['button']; 	// using the GET method, you receive a number
					// according to the actual link, eg.
					// myfile.php?button=2 will send "2" as a signal
	
	if(button == 1) // if link gives number 1, this code runs:
	{
		include("biography.txt"); 

		// include() prints all contents of the given file
		// AND it's included before rendering the html
		// so you can just include the regular html data
	}

	if(button == 2) // if link gives number 2, this code runs:
	{
		include("pictures.txt");
	}

	if(button == 3) // if link gives number 3, this code runs:
	{
		include("liveshows.txt");
	}

?>

 

[AdamWathan]

Thanks for that, I'll see what I can conjure up!

 

[Atheist]

@Torniojaws: I use Opera, so I never had to worry about such things.

PHP is server side, so don't how you think to reload something that's iframe without reloading the whole page.

 

[Torniojaws]

PHP is server side, so don't how you think to reload something that's iframe without reloading the whole page.

That's the beauty of my method above. Because the actual data and formatting (html, css and so on) is already loaded and you always use the same file (myfile.php in my example), you actually only load the data that comes with the include() function No other data will be reloaded. It also saves you in transfer costs on the webhotel.

Edit:
Oh and you don't need any iframes with php and separate container file + data files. By that, I mean that you have a file that contains all the usual header data etc (<?xml blabla...><html><head> etc), and a separate file with the actual contents of a specific page (for example <h1>Biography</h1><p>Asdasdasdad</p>), and you select the datafile with GET, ie. index.php?page=biography, which allows you to have just one display page (index.php).

 

[Atheist]

But for $_GET to be populated with new value you have to click on the link and would reload the page. Am I right?

 

[Torniojaws]

At least for me, it doesn't seem to reload the actual page. Just the new contents from the text file. But if all else fails, maybe you could just open a player in a new tab/window.

 

[Atheist]

I think it's because you have a fast internet or you are doing it localy so it looks like it not reloading the whole page. There is a way to call php without page relaoding, but that's called AJAX... and that javascript again.

 

[AdamWathan]

Thanks for motivating me to learn PHP dudes, I spent a couple hours with it today and got the hang of it, it is and AWESOME and powerful web development tool, I've totally been living in the past!

 

[Atheist]

Now learn Smarty template or develope your own templating engine.

 

[Damphire]

I'm not sure you are going into the right direction solving a simple design issue with a powerful "application" lang like PHP. If you're still on an early stage of development I suggest you find a better and "simpler" way to achieve a good design for your page. Simple is usable, and usable is simple