Jump to content

Web designers - quick bit of help needed


Guest hindu times
 Share

Recommended Posts

Guest hindu times

I'm building a website and need to pull an external web page (not on my domain) into an iframe on my site. Problem is, the iframe isn't resizing it's height depending on the content added to it, so it displays a blank area below the imported page. Is there a way to make an iframe's height adjust accordingly to the content that is going into it? Any help is much appreciated. Ta.

Link to post
Share on other sites

Do you have a very good reason for needing to include this website in yours ht? Would a link and some content of your own do the same job better?

 

I just ask because in my experience this is never done well and looks terrible a lot of the time.

 

I would tend to agree with this, tbh.

Link to post
Share on other sites

If that's the iframe working then it looks surprisingly OK. Fits in quite well with the rest of the site, good job.

 

Is something going to go in the big blue area? Photos?

 

Yeah, photos and ads for my CDs and stuff.

 

I'm a big fan of the wide photo across the whole site. Should be good.

 

You're doing a grand job of the site, no doubt.

Link to post
Share on other sites

I have a couple more questions if anyone can help:

 

- the music page all works fine in firefox, but in IE8 the download links don't work and it comes up with errors on the page. Any idea how to fix that?

 

- is there a way to force an iframe to open all external links in a new window?

 

On the first one, I don't know that much about cross-browser stuff. If you Google for the specific error you might come up with something.

 

On the second one, I wouldn't think so as the iframe is just importing an external site. You would need the external site to have its links set up like that I would think. I'm not a big fan of links that open in a new window anyway, but that's more an opinion than best practice!

Link to post
Share on other sites

Yeah I'm not a massive fan of new windows, but because the download section is technically a different website, once someone has completed their download it takes them back to bandcamp rather than my page. Tricky stuff.

 

Aye, it's an unusual situation you've got there.

 

Unless there's another way to get the music onto your site, then I suppose the price you pay is a few lost visitors at the point they complete the download.

 

On the bright side though, if they get as far as making a download then you could argue the site has done its job and they'll be back anyway.

 

Generally not worth trying to force visitors to stay on your site if it's easier/better for them to leave IMO. This is basically why I never use the new window link option.

Link to post
Share on other sites

That's true, but I don't think you can make them respond to a mouseover like flash buttons. They would be animated, but not intelligent.

 

Tru dat. Making the animations fire on a mouseover isn't hard, but I wonder if it's worthwhile?

Link to post
Share on other sites

That's true, but I don't think you can make them respond to a mouseover like flash buttons. They would be animated, but not intelligent.

 

Tru dat. Making the animations fire on a mouseover isn't hard, but I wonder if it's worthwhile?

 

The aim is to get them working like this: www.johnmayer.com

 

They are gifs I believe and I'm hoping to get mine to react in the same way.

 

 

You can make animated GIFs in Flash. 'File>Export movie... Animated GIF'. You ever get the feeling you've overcomplicated things a bit, mate? :lol:

Every single day!  :lol:

 

 

 

John Mayer makes such nice music I don't even care he's a racist sex addict.

Link to post
Share on other sites

That's true, but I don't think you can make them respond to a mouseover like flash buttons. They would be animated, but not intelligent.

 

Tru dat. Making the animations fire on a mouseover isn't hard, but I wonder if it's worthwhile?

 

These days it would mostly be done with text links controlled by CSS I reckon, where the colour and/or formatting changes on mouseover.

 

I think John Mayer's ones are done by javascript. I don't know much about scripting these days, I don't really develop stuff myself any more.

 

They are gifs, but that's just the image format I think, I don't think the animation is normal gif animation. It's more likely to be two different gifs with the transition controlled by scripting.

Link to post
Share on other sites

Seeing as you already use jQuery, you can easily simulate the navigation effect (which is quite nice :) ) with a technique called CSS Sprites - http://www.alistapart.com/articles/sprites2/  (demo - http://www.alistapart.com/d/sprites2/examples/example6-function.html). Check it out. It's a nice and clever approach. Drop me a PM if you need assistance :)

 

You can also force links in the iframe to open in a new window but that's not really a good practice..

 

oh, and good job so far :clap2:

Link to post
Share on other sites

Seeing as you already use jQuery, you can easily simulate the navigation effect (which is quite nice :) ) with a technique called CSS Sprites - http://www.alistapart.com/articles/sprites2/ . Check it out. It's a nice and clever approach. Drop me a PM if you need assistance :)

 

You can also force links in the iframe to open in a new window but that's not really a good practice..

 

Totally, that's what I was trying to explain in my totally out of touch way.

Link to post
Share on other sites

I'm afraid that there isn't really a simple solution to that either :| The flash movie and the iframe are two very separate DOM entities and as such need to exchange parameters in order for the flash to know what's going on in the iframe.

 

I'm not very good with Flash but what you need to do is basically pass the iframe URL (using the swfobject js framework) from the browser to the flash movie. Then add some sort of actionscript logic that parses the url parameter, trims it to a meaningful string (the name of the iframe page) and adds the 'selected' state to the button that corresponds to that string.

 

If thats too complex, you're left with three options the way I see it..

 

- Ignore the problem. (probably what I would do :) ) After all, this isn't really a critical issue. It's more of a usability tweak. You can get away with not highlighting the current navigation item

 

- Scrap the iframe and separate the page in two 'normal' frames (a tiny one at the top for the music player so that the songs don't stop/start after each navigation click) and one which holds the navigation and the content. This way you can load a different navigation flash in each page.. not the most flexible solution and wouldn't work with the cross domain content..

 

- Replace the flash navigation with a html one.

 

 

edit: Here's a good tutorial, seems quite detailed - http://www.flashmagazine.com/tutorials/detail/passing_parameters_to_flash_using_javascript/

Link to post
Share on other sites

So if I replace the flash buttons with gifs or the CSS sprites technique, i should be able to link these new buttons with the iframe pages so that the back buttons would work?

It would still require a bit of jquery code but it's the simpler option imo..

 

Dealing with iframes and cross-domain pages is a bit tricky though.  You'd find that very few 'large' sites use iframes for content navigation. In most cases, their usage is limited to containers for third-party spam banners and such..

Link to post
Share on other sites

No probs, I like your music a lot..

 

Frames are relatively rarely used because in most cases they can be avoided. In your case though, you have to use them if you want the external content embedded in the page.

 

Maybe you should consider creating your own 'Music' page, instead of using the external content. You're including the whole bandcamp website with it's 30 000 lines of js code.. There will surely be a lot of issues if you want to use any fancy js framework  in your page (like jQuery - That's why you get the javascript error in IE)

Link to post
Share on other sites

We are toying with just opening up the bandcamp page in a new window when people click on music.

 

Yep, that's what I would do.. I wouldn't use a navigation item for the link though.. That's considered a bad usability practice ;)

The bandcamp profile provides some key functionality so it would make sense to emphasis on the link.. Maybe even place it as a graphical element in the corner of the flash header or something..

Speaking of the flash header, you probably already have a good idea what it'll be but an artwork in the mood of your album covers can make a killer layout..

 

So we may rethink the iframes. They are currently used all the way through the site for content, even if the content is our own. What other options are there though that will dynamically resize depending on the size of the content added to it (i.e blog posts etc.)

 

Tbh I'd continue with the iframe, seeing as you won't load any complex external content in it.. It's all down to preference and what you consider easier to develop. After all if a site is working as it should, it's done correctly, regardless of how it's developed..

 

Ok, I have another question.

 

I spent yesterday remaking the main framework of the website and using gif images for the buttons. It works well.

 

However, in IE8, Safari and Firefox, when I click the Shows tab from the Home page, the entire page shifts to the left slightly.

 

It doesn't in IE7 or when I force compatability view. Any ideas why it would shift like that when it doesn't in IE7?

 

This is the new template (minus the music player and mailing list for now, and with some very rough content in places) -  http://www.rjt-online.com/2010%20Website/home_new.php

 

hehe, I may be wrong, cause I haven't inspected the structure closely.. but I don't think that's a bug in your code.

IE6 (probably IE7 too) ignore the 5 or so pixels that the vertical scrollbar takes when it calculates the body's width. So in effect it centers your container div according to the window width, regardless if there's a scrollbar or not.. The other (better) browsers will center the container according to the window width minus the scrollbar width (if it's present).. which makes sense really, cause users might tweak their scrollbars width for accessibility reasons..

 

Anyway, good job on the navigation :)

Link to post
Share on other sites

Yeah I realised it was the scrollbar basically straight after I posted that message  Laughing

 

Next question would be, we're really struggling with the functionality of having the music player at the top of the page continuosly through the site. We think we'll shift so the entire page changes when you navigate, so I was wondering if there was any other way of having music play through a site (with the ability to switch it on and off and change track etc), even though the pages are changing. We're probably going to do away with the fixed music player frame at the top.

yep, a tiny frame at the top for the music player is the easy and logical solution to that :)

Link to post
Share on other sites

Yeah I realised it was the scrollbar basically straight after I posted that message  Laughing

 

Next question would be, we're really struggling with the functionality of having the music player at the top of the page continuosly through the site. We think we'll shift so the entire page changes when you navigate, so I was wondering if there was any other way of having music play through a site (with the ability to switch it on and off and change track etc), even though the pages are changing. We're probably going to do away with the fixed music player frame at the top.

yep, a tiny frame at the top for the music player is the easy and logical solution to that :)

 

Aye. Don't think there's any other solution, really???

Link to post
Share on other sites

Yeah I realised it was the scrollbar basically straight after I posted that message  Laughing

 

Next question would be, we're really struggling with the functionality of having the music player at the top of the page continuosly through the site. We think we'll shift so the entire page changes when you navigate, so I was wondering if there was any other way of having music play through a site (with the ability to switch it on and off and change track etc), even though the pages are changing. We're probably going to do away with the fixed music player frame at the top.

yep, a tiny frame at the top for the music player is the easy and logical solution to that :)

 

Any other solutions to that though, like the music somehow hidden in the background, but controllable, and continous even when the pages change?

 

 

What's wrong with that solution? Easiest and simplest way by far.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...