HTML - Changing A Portion Of A Page Query...
Hello! Just a quick question really...
Have you ever visited a website, clicked a link within the site, and noticed after doing so that only a portion of the page has changed? The diagram attached will hopefully help explain I am trying to achieve. i basically want a page consisting of two columns. The left column (nav) will be my navigation panel and contain links that when clicked by the user, the content beside it in the 'right' column (content) changes. Please can anyone suggest how i can achieve this? I have experimented with frames and floating frames (iframes) and it does work, yet I understand that frames are not supported by all browsers? this worries me! Can this be achieved through css? Are there any of you that know of any tutorials that can help me? Please, any help will be much appreciated! Similar TutorialsOkay a simplified version of my problem is this: I have a small table of 2x2, with the right two cells merged. I have content in the right cell in the form of text. The cell has the following formatting: overflow: hidden; and the text has the following formatting: position: relative; left: -91px; vertical-align: top; text-align: justify; The left cells are 182px wide, so the text looks like it is centered with respect to the entire table, with the overflow into the left two cells being cut off. The problem now is, I only want the text covered by the top left cell to be cut, and I want the text in the bottom left cell to still be visible. I tried using the 'clip:' property, but you cannot specify a non-rectangular area so it's of no help to me. There is an image in the top left cell, and nothing in the bottom left cell, so the other way to fix my problem would be to find some way of having the overflow appear BEHIND the other elements, so that the image would cover the text, and the empty cell would not. Is it possible to draw only a certain portion of an image using img? I want to take this radar and only have it draw a rectangle around where I live instead of the whole image. Is there a way to specify what coordinates to draw using img? It seems, at least on my computer, that when I choose the blog page on my "site in progress"... that the page sort of zooms in. I thought at first it was because the page used a scrollbar and the other page didn't, but then I created another page with a scrollbar, separate from the blog, and it did NOT do the zoom effect. You can see the site in question he http://www.pzfantasyfootball.com As you can see, most noticeably in the navigation, the font looks fine, not blurry, not too big, just right. When you click on the blog page, the font becomes blurred and slightly bigger. I'm running the latest Firefox on a 1440x900 monitor. Any advice would be greatly appreciated. Thanks Is there a way to change the way IE handles transparent portions of an element - like a 200x200 pixel div with borders but no background? Firefox will consider "onmouseover" for the entire div, but IE seems only to react to the thin border. So, I can make a simple drag-and-drop div in Firefox, but in IE you have to pick the 1 pixel border to drag it around :-( Putting a transparent image in the div does not help, since this will make the browser itself grab that image, ignoring my script. How can you make the div become selectable in IE too? All the best Robert This might be a .css question, but I have several html pages with a copyright date at the bottom, and I want to be able to change the date from within a text file and display that date (use a function to open the text file) so that I can just change the text file instead of every html page. Maybe there's an easier or more logical way of accomplishing this, so I'm open to any suggestions. Hi is there any code etc to enable me to change the background of a page every few seconds to another image. Thanks. Hello People, I have 5 images that i want to display one by one after regular interval's of time . I dont know how to do this in HTML .Can you please help me. Thanks in advance, Kluserner Dear friends I want to make a attractive home page of my site with using j-query please guide me How can I use J-Query _______________________________________________________ Hi all, I am wondering if anyone know how to have a link, once clicked, open a popup window WHILE also changing the page in the existing window. I know how to code them separately, but I do not know how to combine the two actions. HTML Code: <A HREF="javascript:popUp('popup.html')">link name</A> My site currently uses the above code to open popup windows. Any help would be much appreciated, David the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 5; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg' Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg' Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg' Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? Just wondering could anyone tell me, I want to add an image to my homepage so that when you refresh the page the image changes, how do i do it? I need to make it so when you click on the image map it changes the image and changes the image map. I am ONLY using html and javascript is not an option. I am shure it is something stupid... <code> <img src="image.gif" id="image" border="0" name="image" usemap="#tour" /> <map name="tour"> <area shape="circ" coords="46,39,20" onClick=" document.getElementById('image').src='flag1.jpg'; document.getElementById('image').useMap='tour2'; <!--NOT WORKING ^?!--> "> </map> <map name="tour2" id="tour2"> <area shape="rect" coords="590,325,650,408" onClick="document.getElementById('image').src='flag.jpg';"> </map> </code> why???! throwing in another random question I can't change the cursor with image maps either... onMouseOver="this.style.cursor='help'" inside my code is not changing anything... when I highlight the mouse over the image map section... Hi there I'm currently making a estate agency for my college project and have come into a problem I am not that great with html I much prefer programming rather than web development So here is the question how do I change a image on click of another image (for say there is 1 big image on the website and 3 smaller ones I want to change the content of the big image into the clicked smaller image) an example of this is at the following website: http://www.haart.co.uk/buying-house/...ls_160839.aspx Any help would be great thanks dave Hi everyone. Whenever i go to http://www.smokethosetires.com/ it goes to index.php. How can i get it so when i enter my url my homepage is home.php A webpage I am working on http://www.pfrieme-stumpe.de/ I want to change the framesets border either to a set value or a smaller value.. I have no idea where to change this in the code... any ideas? Thx Matt Do you know that happens when a visitor does click one of the Link and change the text next? Hi M8's I am struggling a bit here I am no HTML expert but I am sure someone out there will say - hey! that's easy man. I wnat to put a date on my web site that shows 10 days ahead of the live date and changes every day to maintain that gap, anyone any ideas. regards I'm trying to build a site where you can change the .css I found one way that works but the problem is that, when you click on a link, it automaticly changes back to the default .css file in stead of the one that the person was using... this is the code I used: <head> <link title="style1" rel="stylesheet" href="style1.css" type="text/css" /> <link title="style2" rel="alternate stylesheet" href="style2.css" type="text/css" /> <link title="style3" rel="alternate stylesheet" href="style3.css" type="text/css" /> <script type="text/javascript"> function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } </script> </head> and in the body: <a style="cursor:pointer" onclick="setActiveStyleSheet('style1');"><img src="images/a1.jpg" alt="a1" width="30" height="30" /></a> <a style="cursor:pointer" onclick="setActiveStyleSheet('style2');"><img src="images/a2.jpg" alt="a2" width="30" height="30" /></a> <a style="cursor:pointer" onclick="setActiveStyleSheet('style3');"><img src="images/a3.jpg" alt="a3" width="30" height="30" /></a> I could use some help... |