Lorne
-
Posts
16 -
Joined
-
Last visited
Lorne's Achievements
Newbie (1/7)
0
Reputation
-
I found a solution that works - I put this script in the <head> of each html page that has to be loaded in the tabcontent area of the page: <script type="text/javascript"> if (window.parent.document.title != 'Bridge Analyser') { location.replace('index.html'); } </script> window.parent.document.title returns the title of the index page if the tabcontent was loaded by the index page but returns a different value if the user links directly to the tabcontent page instead of index.html.
-
Sorry I do not understand what you are saying. It is a tab menu so clicking a tab loads the relevant html page into the tabcontents area of the page. I can't redirect the home page to the index page without a conditional statement because the index page loads the home page when the user click 'home' in the menu and it will keep reloading if there is no conditional statement to only go to the index page when the home page (or any other page that can be loaded via the menu) is loaded directly and not within the overall framework of the index file.
-
I have a web site that uses tabs to load web pages into the contents area of the screen with a vertical menu on the left and a header across the top. It works fine if users load the index page but google shows links to pages that should only show in the content pane so if users click these links they load without the tab menu or header. How can I detect if one of these pages has been loaded directly and redirect it to the index file ? If you want to see the problem https://www.cantab.net/users/bridge.analyser/Bridge/index.html loads the page correctly but https://www.cantab.net/users/bridge.analyser/Bridge/home.htm is what the user gets clicking a google result that is not the index file, so I want to redirect the second link to the index page but only if the user did not load the index page first. I know how to do the redirect but I can't work out how to detect how the user got to the page so it only redirects when it needs to.
-
Many thanks - got it working now. Initially I did not realise you left the map code in but were not using it, however with a slight tweak to get the tip to show above the area which fires it (using em since the text does not scale and distance depends on number of lines of text in the tip) I have it working off my CSS with this sample code. I did not set any ID's as it seems to work OK as is: <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Image Maps</h2> <table style=" max-width: 640px"> <tr> <td> <div class="tooltip" style="left: 22%; top: 15%; right: 70%; bottom: 75%"> <span class="tooltiptext" style="top: -3.8em">Tip 1 long sample text to test word wrap</span></div> <div class="tooltip" style="left: 62%; top: 45%; right: 20%; bottom: 40%"> <span class="tooltiptext" style="top: -2.5em">Tip 2 short text</span></div> <img alt="Image not found" border="0" src="Timer2.gif" width="100%" height="auto"> </td> </tr> </table> </body>
-
-
The image scales both height and width inside a table set for max-width equal to the image size so it never grows bigger than its native size but shrinks with the aspect ratio constant. Here is my actual code right now for the first tooltip only to make it easier to read (note I took the left and top out of CSS to make it easier to see left/top values against the tip): <table style=" max-width: 844px" cellspacing="1"> <tr> <td> <map id="FPMap0_ID" name="FPMap0"> <div class="tooltip" style="left: 2%; top: -18px"><area shape="rect" coords="30, 41, 93, 68"> <span class="tooltiptext">Menu options here let you set a bias for teaching purposes</span></div> </map> <img id="FPImg0_ID" alt="Image not found" border="0" src="Images/MainView.gif" width="100%" height="auto" usemap="#FPMap0"> </td> </tr> </table> If I change top to a % value the tip always appears fixed to the top of the image.
-
Thanks for that - it was a partial success. The left value scales with the image but the top value is fixed at the top of the image regardless of any % value. Also tried using bottom but the same thing. Maybe this is because the image is scaling with width 100% and height auto but that is the only way I know to zoom the image and keep the aspect ratio.
-
I have written a CSS custom tooltip that shows a number of tips as the cursor moves over an image based on an area map. All works fine on a computer but when viewed on a phone/small tablet the image is resized to fit the screen. I have written some code to resize the area map to fit the resized image but can't find a way to get the tip to show at the cursor position - as a temp measure I have hard coded the tip popup position for each tip. Can anybody help ? I create the tip with this code: <div class="tooltip tt1"><area shape="rect" coords="34, 66, 64, 89"><span class="tooltiptext">Tip text goes here</span></div> Base info for tooltip and tooltiptext is in my css file and modified by tt1, tt2, tt3 etc to position each tip, the code for which is: .tooltip.tt1{ top: -1.5em; left: -12em; } .tooltip.tt2{ top: 1.5em; left: -12em; } .tooltip.tt3{ top: 6.5em; left: -9em; } etc.... Ideally I want to get rid of tt1,tt2,tt3 etc and have top and left dynamically set at the cursor position in the tooltip css code or somehow passed to the tooltip when it shows so the tip is correctly positioned when the image is resized.
-
OK - solved it. You have to use the full file path from the web server root to the image rather than the relative path from the folder with the html code to the folder with the images. This function now works.
-
In case anybody else wants to do this I have solved it. You need to put code at the start of the function OpenTarget that does this: if (pageName == "Home"){ document.getElementById("Home").innerHTML = document.getElementById('Home').innerHTML; }else if … etc for each page where you have links that change the contents of the initial page..
-
Thought I had better add that I also tried (without success) just loading the first image with onclick executing the following code via ChangeImage('Images/GraphFilter.gif'): function ChangeImage(imgName){ var image = document.getElementsById('mygraph'); image.src = imgName; }
-
I have several images that show different results of an event. I want my page to load with image1 visible, the rest hidden, and the user to be able to click text under the image to hide what is visible and show another image in its place. The image is in a table but does not have to be. This is my failed attempt to try and get it to work with 2 images: in my html body: <table style=" max-width: 792px"> <tr> <th> <img alt="Image not found" id="mygraph" border="0" src="Images/Graphs.gif" width="100%" height="auto"> <img alt="Image not found" id="myfilter" border="0" src="Images/GraphFilter.gif" width="100%" height="auto" style="display:none"> </th> </tr> </table> <p>Click <a onclick="SwapImage()" href="#">here</a> to swap image</p> and the javascript function executed by the click: function SwapImage(){ document.getElementsById("mygraph").style.visibility = 'hidden'; document.getElementsById("myfilter").style.visibility = 'visible'; } but the javascript does nothing. I also tried display instead of visibility none or block with no success. The first image shows up with the second hidden but does not change when clicking the text. Can anybody help ?
-
OK, I have given up and removed the links from the pages that appear in the contents area so I have a working site. If anybody does know how to create a link in a area contents page that will click a button in the menu I would be grateful for the info as this would improve the usability of my site. I can write a script in the index page that will click a menu button but that script does not work from any other page, presumably because the scope of other pages does not extend to seeing the code in the menu index page.
-
You are not doing what I said in my post. If you just click the menu buttons it works fine. It fails if you click a link on the web page that is showing in the contents area to the right of the menu and then try to get back to the original page by clicking a menu button.
-
The link to the test site is: https://www.cantab.net/users/bridge.analyser/Bridge/Files/ If you press a link in the contents area of home page (ie not the menu link but the html link in the text of the contents page) like 'print options' it opens the print option page but if you now click the home item in the menu it stays on the print options page. Also if you go to another page in the menu and back to home it reloads the print options page. Note the links to download files are not set up on this test page. If you want to see the original web page using frames go to https://www.cantab.net/users/bridge.analyser/Bridge/ I am using <iframe> because that was the only way I could see to get the tab menu to load a web page in the contents area.