eiranix

Ah ok great thanks. Is there a way to do this with image src as well as href?

No that doesn't quite work. It zooms in fine, but still does not zoom out...

Ok cool. So back to the original question - Is there a way using php or perhaps javascript to have the menu detect that it is currently being applied to a page in a sub directory and adjust the menu's links accordingly?

That looks helpful for the file you are including but what I meant was the links inside the file you are including. If the file you are including is the navigation menu, do I need to use a separate menu file when it's included on pages that are stored in a sub directory? In this example I want the menu included on all six pages, but 3 of them are in the folder called 'news'. This means the links in the menu won't work: /menu.php /home.php /news.php /contact.php /news/item1.php /news/item2.php /news/item3.php Or am I getting this wrong, does the included file base it's links off the location of the menu file or the location of the page the menu is included on?

Thanks, I didn't know about this, it works great. Is there any way to enable the user to zoom out if they want to?

Ok so all my media queries are doing at the moment is moving or removing a few small elements when the page gets too small for them to fit right. The page itself is really just a div with a max-width of 960px so that it will shrink to fit when the window gets smaller than that. And no I'm not using a viewport meta tag, should I be?

-Thanks davej, you made me realise what I was doing wrong! wow I must have been blind... The zoomOut function was all wrong, it should've been: function zoomOut(el){ el.className = "hide"; var zoom = document.getElementById('zoom'); zoom.src = ("images/loading.gif");} And sorry for the lack of info - 'zoom' is the image, 'zoomcontainer' is a div the image is in. The function shows/hides the container and swaps the image within it. The loading.gif is the placeholder image, otherwise I have an image tag with no src. -Hadien, The thing I liked about doing it this way was that, if you were to add an image later, all you need to do is add the one line of html for the thumbnail and it works.

I have a script that loads a large image when you click a thumbnail. It uses an image placeholder that is hidden, so the script unhides it and swaps the image to the one that matches the thumbnail. This works fine until you click on a different thumbnail - you see the first image for a split second before the new one loads. I tried to stop this by switching back to the 'loading' placeholder but for some reason this didn't work... Can anyone help? function zoomIn(el) { var id = el.id; var zoom = document.getElementById('zoom'); var zoomcontainer = document.getElementById('zoomcontainer'); zoom.src = ("images/" + id + ".jpg"); zoomcontainer.className = "show";} function zoomOut(el){ el.className = "hide"; zoomcontainer.src = ("images/loading.gif");}

I have made a page that is flexible and uses media queries to optimise the layout for smaller screen resolutions. I have found that mobile browsers scale the page down. I tried on a phone which has a resolution of 480 x 800px, when viewing portrait the page should be 480px wide but instead zooms out and views it as if its 800px wide.... this means all the buttons are too small when they dont have to be. Is there any way to make mobile devices use the flexibility of the website?

I want to use the php include function to apply the header navigation to each page of my site from a single file. How do you deal with pages that are within sub directories? For example, I have a News page that sits in the root folder but then all the news items are within a 'news' folder. This means all the relative nav links and image references on news item pages need '../' before them. Do I have to create a second menu file for subdirectories or is there a way around this?

Great client-side pagination plugin: http://luis-almeida.github.io/jPages/Edit: By downloading JQuery to a local folder my problem was fixed. So now this post is just an ad

Perfect, thanks dsonesuk! That was a simple fix, I can't believe I didn't think of that...

Anyone?

Can anyone help me with this? I want an image to be in the center of the screen inside a div wrap. The image needs to be flexible when the window sizes. What I have at the moment is just about right except that the image is getting cut off a bit on the right side.... I had it working with the image on its own but I now have a need to have that inner div there in order to put an 'after' on it later. .show { position:fixed; overflow:hidden; left:0px; top:0px; height:100%; width:100%; z-index:10; text-align:center; vertical-align: middle;}.show div { display:inline-block; margin:10%; vertical-align: middle; border:3px solid red; overflow:hidden;}.show img { vertical-align: middle; position:relative; border:8px solid #ffffff; width:100%; height:auto;}.helper { display: inline-block; height: 100%; vertical-align: middle;} <div id="zoomcontainer" class="show"> <div> <img id="zoom" alt="Enlarged Image" src="http://winniecooper.net/flores/pics/snow%20umbrella.jpg"/> </div> <span class="helper"></span></div>

I should have mentioned, it is a javascript for use in adobe illustrator.... I thought, being just a dialog, it might use common scripting.

I have not made a dialog box before, but I pieced this together from examples online... Can someone help me with a few of things? (sorry if these are silly questions) 1 - How can I set the width of the input fields? 2 - How can I have the input fields in a row but then have the checkbox and button underneath? 3 - When the checkbox is checked, how can I make the last 3 fields become greyed out and take the value in the first field? var box = new Window('dialog', "My Dialog");box.orientation='row';box.panel1 = box.add('panel', undefined, "Left");box.panel2 = box.add('panel', undefined, "Right");box.panel3 = box.add('panel', undefined, "Top");box.panel4 = box.add('panel', undefined, "Bottom");box.left_input = box.panel1.add('edittext', undefined, "0");box.right_input = box.panel2.add('edittext', undefined, "0");box.top_input = box.panel3.add('edittext', undefined, "0");box.bottom_input = box.panel4.add('edittext', undefined, "0"); box.checkbox = box.add('checkbox',undefined, "Equal Margins", {name:'equal'}); box.closeBtn = box.add('button',undefined, "Ok", {name:'close'}); box.closeBtn.onClick = function(){ var left = box.left_input.text var right = box.right_input.text var top = box.top_input.text var bottom = box.bottom_input.text box.close(); alert(left);} box.show()

Yes thank you that works... I didn't think alignment could work that strangely, so I didn't try that! I don't think it makes any sense, but it works!

The first .cell has text. The image in the second .cell makes the text in the first move down...

Sorry if this is a stupid question, but why does the image in the third div affect the layout of the text in the first div? .table { display:table;}.cell { width:100px; display:table-cell; background-color:lightblue;}.gutter { display:table-cell; min-width:20px;} <div class="table"> <div class="cell"> Some Text </div> <div class="gutter"></div> <div class="cell"> <img src="http://a.deviantart.net/avatars/a/p/aperture-a.png"> </div></div>

Solved: by putting each column in a div container and setting display:table-cell. Using media queries at a certain point to reset display to inline and make it one column.

I am trying to create a type of two column layout with a fixed space between them. How can I make it so the two lists take up the remaining space and have flexible widths? body { margin:0; padding:0;}ul { margin:0; padding:0; list-style-type:none;}li { margin:0; padding:0;}ul.col { background-color:lightblue; float:left;}ul.col li ul { background-color:yellow; margin-left:60px;}ul.col li ul li:first-child { position:absolute; left:0px; border:none; float:left;}div { width:20px; height:100px; background-color:blue; float:left;} <ul class="col"> <li> <ul> <li>Test1</li> <li>Some Text</li> </ul> </li></ul><div></div><ul class="col"> <li> <ul> <li>Test2</li> <li>Some Text</li> </ul> </li></ul> *Changed original question

....aaand I have just found it was a case of not being completely familiar with notepad++ The encoding view was on UTF-8 but the file was still ANSI.

I am having an issue with character encoding, can someone let me know what I'm doing wrong? When I add: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> all my European characters (like ö é ô ) turn into question marks...

Thank you, the plugin looks promising. I will look into it.

No, all I have at the moment is a simple static page with a list of news items that is going to keep getting longer with updates. I was wondering if there is a method for loading parts of the page at a time with javascript or else a tutorial that explains the whole process of what I would need to do with php etc.