Jump to content

Domain Name


vchris

Recommended Posts

  • Replies 231
  • Created
  • Last Reply

Top Posters In This Topic

How do you guys like this http://vchris.net/portfolio/portfoliotest_e.php compared to this http://vchris.net/portfolio/portfolio_e.phpand this http://vchris.net/home/test_e.php compared to http://vchris.net/home/and how would I add the media print for the css when I include css this way:<style type="text/css">@import url('/css/vchris.css');@import url('/css/slimbox.css');</style>I would need another <style> tag right?
With the @media rule of course:
<style type="text/css">@import url('/css/vchris.css');@import url('/css/slimbox.css');@media print {@import url('/css/print.css');}</style>

As for preference between the two pages, I think the new one is better, but in either ways, I suggest you explicitly specify the size of those images in the CSS, so that the page is the right size from the start, rather then expanding itself. It's really annoying when a page does that.

Link to comment
Share on other sites

As for preference between the two pages, I think the new one is better, but in either ways, I suggest you explicitly specify the size of those images in the CSS, so that the page is the right size from the start, rather then expanding itself. It's really annoying when a page does that.
Thanks. Do you mean when you click on one of the thumbnails? This script is pretty complicated and that's how they open it up.I think the new thumbnails take a lot of place (pretty much like the old ones). I want something smaller but I wanna be able to know what I'm looking at... Any ideas? or maybe a js script that could help?
Link to comment
Share on other sites

No. I'm reffering to the thumbnails themselves. For example in:

<li><a href="/images/websites/mysite_large.jpg" rel="lightbox" title="mySite - This is a personal website I used as a webpage for my bookmarks. This site was driven by a MySQL database and PHP pages."><img src="../home/mysite_small.jpg" alt="mySite" /></a></li>

match the <img/> element here (and in this area) somehow to give it explicit

width:404px;height:44px;

Link to comment
Share on other sites

With the @media rule of course:
<style type="text/css">@import url('/css/vchris.css');@import url('/css/slimbox.css');@media print {@import url('/css/print.css');}</style>

As for preference between the two pages, I think the new one is better, but in either ways, I suggest you explicitly specify the size of those images in the CSS, so that the page is the right size from the start, rather then expanding itself. It's really annoying when a page does that.

I tried that but it seems to screw everything up... I put this exactly@media print {@import url('/css/print.css');}but then it appears as though there is no css. The path is correct and all.
Link to comment
Share on other sites

Are you sure you don't mean @import url('css/print.css'); ? Otherwise it will be looking in the path "//css/print.css" for the stylesheet.

Link to comment
Share on other sites

Are you sure you don't mean @import url('css/print.css'); ? Otherwise it will be looking in the path "//css/print.css" for the stylesheet.
Trust me the path is fine. I'm including 2 other css and they work fine.
Link to comment
Share on other sites

Is there some sort of link that we could observe? The ones you've given don't use the new stylesheet.Anyhow, even if it turns out it really doesn't work, why not use <link /> instead?

Link to comment
Share on other sites

Wow I'm very impressed with your site. I cant wait until my skills are up to that level, currently they are very lacking. My current webpage is horrible, I just wrote up a quick html index and put whatever coding but its almost unbearable. Anyway, I'll continue learning and hopefully one day be as talented ! (P.S. If anyone wants to see my horrible website its www.cleargames.net. Keep in mind I've only been studying any web work for 2 weeks.)

Link to comment
Share on other sites

Is there some sort of link that we could observe? The ones you've given don't use the new stylesheet.Anyhow, even if it turns out it really doesn't work, why not use <link /> instead?
I removed the stylesheet after I saw it didn't work. I'll give you a link later on.
Wow I'm very impressed with your site. I cant wait until my skills are up to that level, currently they are very lacking. My current webpage is horrible, I just wrote up a quick html index and put whatever coding but its almost unbearable. Anyway, I'll continue learning and hopefully one day be as talented ! (P.S. If anyone wants to see my horrible website its www.cleargames.net. Keep in mind I've only been studying any web work for 2 weeks.)
Thanks. Kinda normal you've only been coding for 2 weeks...
Link to comment
Share on other sites

is there an special reason you guys are not including your stylesheets like this?

<link rel="stylesheet" media="print" href="/css/print.css" type="text/css" />

What is the benefit of using import url()? Seems like just a bunuch of needless code on each page.

Link to comment
Share on other sites

I don't know... I heard it was better with the import way.edit: I just did a bit of reading on @import vs link and it seems that @import is mainly for including a stylesheet in a stylesheet and link is for normal inclusion of a stylesheet in a webpage. If you are thinking of adding a style switcher to your site then you'll have to use <link>.I guess I'll be switching to links.print.css works now!

Link to comment
Share on other sites

Any other suggestions?The other thing I had in mind was a style switcher, one for red, green and blue (RGB). What if some of the images (nav) are not in the css, would I need some session variable so I know which style to show or is there another way?

Link to comment
Share on other sites

Well, firstly I would put as much as possible in the CSS but for things out side the CSS I think a seesion variable would be best for keeping track. Or possibly a cookie that way every visit to the site loads the last theme they chose. I like when sites remember what I like and load it for me :)

Link to comment
Share on other sites

Oh yeah I forgot about cookies. I never really worked with them in php so that'll be a great exercise. Cookies it is!

Link to comment
Share on other sites

Before I do the css switcher, I want to replace the bottom nav with icons. I already have 3 of the 4 I need. The icons I have are outlines of a house, letter, document in white. I need something for the about page. I'm thinking of a stick figure head and shoulders but it's kinda hard to do. I can't seem to get it right. Feel free to try and create it. If you have other suggestions for the about page let me know.

Link to comment
Share on other sites

I want to add a sliding panel on the about page. I found one that slides up and down and switched from side to side instead. The problem is I'd like the left border to close on the right border of the div. I would also like for the text not to wrap when the div closes. Any idea how I could change that?Example 2:http://vchris.net/about/slider.htmhttp://vchris.net/about/animatedcollapse.jsedit: I got the no wrap going... All I'm missing is the sliding from the other side.

Link to comment
Share on other sites

edit: I got the no wrap going... All I'm missing is the sliding from the other side.
Well, changing the width makes the div close from the right since all elements are anchored at the top-left corner. If you want the right side to stay put, you'll have to correspond the changing width with a new left position. For example, if each iteration through the animation changes the width by 2 pixels, you'll have to also move the div 2 pixels to the right to keep the right edge where it is and have the left edge move to the right.
Link to comment
Share on other sites

Well, changing the width makes the div close from the right since all elements are anchored at the top-left corner. If you want the right side to stay put, you'll have to correspond the changing width with a new left position. For example, if each iteration through the animation changes the width by 2 pixels, you'll have to also move the div 2 pixels to the right to keep the right edge where it is and have the left edge move to the right.
What do you mean exactly?I'm pretty sure the direction is somewhere in the js file. Here is the function I think is responsible for the direction:
animatedcollapse.prototype._slideengine=function(direction){	var elapsed=new Date().getTime()-this.startTime //get time animation has run	var thisobj=this	if (elapsed<this.timelength){ //if time run is less than specified length		var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)	this.divObj.style.width=distancepercent * this.contentwidth +"px"	this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)	}	else{ //if animation finished		this.divObj.style.width=(direction=="down")? this.contentwidth+"px" : 0		this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not		this.runtimer=null	}}

Link to comment
Share on other sites

Without really playing around with this, it looks like this is where the width is being set:this.divObj.style.width=distancepercent * this.contentwidth +"px"And, because of the name of the variable, and the fact that is it multiplied by the width rather than added, tells me that this script is shrinking/expanding the width by a percentage rather than in absolute pixel increments. This might make my first suggestion a bit difficult. Maybe you could set the div's position to absolute and have the right site anchored rather than the left. Check out this example:

<html><body><style>#test { background-color: red; width: 400px; height: 400px; position: absolute; right: 0px; }</style><script type="text/javascript">function shrink(){    var div = document.getElementById("test");    div.style.width = (div.offsetWidth * .5) + "px";}</script><button onclick="shrink()">Shrink</button><div id="test">Hello</div></body></html>

Link to comment
Share on other sites

[ Solved ]I got the direction working pretty well now.The thing is I want an image to be the link to slide the div. I want the image to be on the left border of the div so when it's closed you only see the image (like a tab) and when you click it, it opens the div and it slides with it. I thought the simplest way was to include the image in the sliding div except seems like the way this is coded that anything that's inside the div will be hidden when closed.PHP: http://www.vchris.net/about/abouttest_e.phpJS: http://www.vchris.net/about/animatedcollapse.jsIf you got some skill in JS and think there's a way to fix this, let me know. I've been working on this for a couple hours and can't find a way to do it. I've already tried adding 50px to the width but doesn't seem to work.

Link to comment
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

×
×
  • Create New...