|
HTML - Spry Highlight On Click?
Hello everyone. I have a spry accordion menu in a table and as you well now when it is clicked you get a highlight around the edge of the spry object, i'm on a mac so mine is grey and when I look at it on my friends PC it is blue. Is there any way to simply get rid of this highlighting effect?
Thanks Thecaia23 Similar TutorialsHi all, I created a very simple Spry menubar using dreamweaver. It copied all the necessary CSS and JS into a folder for me. I have one question. whenever i selected (clicked) on an item(link) on the submenu. the submenu stays open while the page load in the frame. Is there a way to configure it so when i click on an item in the submenu, the submenu will close and the page will still load in the frame? I'm a little stuck with my spry menu. I have been editing it and trying to find the best way to position it and also how to add a border to encompass and seperate all elements. Basically I was wondering if this was the beat way to code the menu or if I was way off Right now my code looks like this: On the page- Code: <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.MenuBarHorizontal{ position:absolute; left: 50%; top: 215px; min-width:690px; max-width:690px; margin-left:-345px }
.style1 {
color: #000000
}
</style>
</head>
<body id="page6">
<ul class="MenuBarHorizontal" id="MenuBar1" name="MenuBar1">
<li><a href="#" class="style1">xxxxxxx</a> </li>
<li><a href="#" class="MenuBarItemSubmenu style1">xxxxxx</a>
<ul>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu style1">xxxxxx</a>
<ul>
<li><a class="style1" href="#">xxxxxx</a>
<ul>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
</li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
</li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
In the Menu Bar CSS File - Code: @charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 100;
padding: 100;
list-style-type: none;
font-size: 100%;
cursor: default;
width: inherit;
background-image: url(../images/spry.png);
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 100;
padding: 100;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-image: url(images/spry.png);
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
top: 33px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: 1px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 2px solid #000000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
background-image: none;
background-color: #a9bebc;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #789492;
color: #000000;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #789492;
}
}
Thanks in advance for any and all help. Hi, My website is www.bcsticketsnow.com. My spry menu at the top works perfectly in firefox, not so perfectly in IE. In IE the menu shows up in the top left corner when you mouseover. In firefox it correctly drops down below the parent item. I made it in dreamweaver. Any idea why it does that? My styles are at bcsticketsnow.com/styles.css my .js file is bcsticketsnow.com/SpryMenuBar.js the rest you can view the source on any page. Any help is much appreciated, thanks! Joel Hi, I have a problem with my spry menu and was wondering if there was a way of fixing it. Firstly it only occurs in IE Second, it fixes it self when I remove the IFRAME on the right (problems still there even if I use OBJECT instead of IFRAME) The problem is, the spry menu bar sub menus wont open out in IE whereas it does in FF. ANY help would be appreciated Good afternoon, I'm currently designing a site for a large exterior decorating company. I've had trouble, but nothing I couldn't work around. My graphic design skills are great, but my web coding is amateur at best. I've compiled a fixed-width site, it looks great in every browser, and in different resoultions. here's the kicker. (and I would have included code if the site were local on this computer, but it's on my laptop) My navigation is giving me major issues. Its set up to link to the site directory folder on my pc, the preview is real-time - what i'm trying to say is you can navigate the site from my pc, although it's not online. and the links work. I have one main-navigation, with drop-downs to a maximum of 2 sublevels (ie: spry vertical menu bar). I can navigate the main level to any of the sub-levels without issue. Code: /../index.html ---- to ---- /../products/siding/wood.html BUT when navigating back to any menu (or to a different sub-level in the same category, ie: siding/aluminum.html) for lack of a better explanation - the url won't drop the current directory. What I mean by this is Code: /../products/siding/wood.html ---- to ----- products/siding/aluminum.html redirects to products/siding/siding/aluminum.html So what i'm asking is if someone can assist me in fixing my page so it doesn't do this. I feel after writing this that my issue lies in the fact that I haven't specified index.html as my root directory. You would assume it would come intuitively for the page to drop the current directory, especially when you're specifying a page in a different level.. But apparently not. Also, i've explored it before but never found a decent answer: Is there any code that will allow me to embed the navigation to each page from a single file. Allowing easy changes to the navigation, simply by editing one file - the navigation? I moved this thread to CSS. It is in the wrong place. http://www.htmlforums.com/css/t-spry...ie-117172.html Hi I am doing a quick website on the cheap. So I decided to add a Spry Accordion for the menu set up. The issue I am finding is that when I click any of the menu items a boxed focus selection border appears around the whole menu, which looks bad in the design. Is there any way to get rid of this issue so when you use the menu this doesn't appear? Also, at present you have to have one of the menu items open as a selection. Is it possible to manipulate the code so that none of the menu elements are open to start? Thanks in advance This might belong in the CSS forum? I'm trying to link to the "Legislation" tab from the footer links. All of this content is on one page and i can't seem to link to it. I tried adding an anchor to Legislation but that didn't work. there must be a way. The page is built using Spry in Dreamweaver CS3. thanks for your help http://www.dynamitedave.com/rsc/index.shtml Hello, I'm working on website and I want to use spry drop down menu bar and I have trouble with it. This is how I want it to be like : When menu is active(rollover hover), it turns darker blue from light blue, and the submenu is same light blue when its not active, but it turns to pink when its active. By far, what I got is : When I roll over submenu, the color is not different from the menu unless the submenus has subsubmenu.... (its orange, but I'm gonna change to pink) like this: It is kinda hard to explain.. but I hope you understood. Thank you very much! --------- here is code : I didn't make any change for the upper part, and this is only part that I made changes. and I only changed colors. --------- } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #33CCFF; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #336699; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #FF3366; i think this is an easy one..... i am using 2 identical spry cluster effects - but two links to two slides i have problem - the spry slide effect works fine for the first instance - but not for the second instance. what changes need to be made to the Cluster call to get it to work?!?! here is a snippet of my source code to reveal the problem.... ///////////////////////////////////////////////////////////////////////////////////////// <!-- WORDSFORMS --> <Div id="sec1" style="display: none;" class="sec1"><strong>Wordsforms</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --> </a> <div id="first_cluster" class="wordsforms" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> <!-- GIRLSBOYS --> <div id="sec2" style="display: none;" class="sec2"><strong>GirlBoys</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --></a> <div id="second_cluster" class="girlsboys" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> ///////////////////////////////////////////////////////////////////////////////////////// can somebody help????? ben www.d-e-p-i-c-t.com Hi. i have a option menu that come behind the adobe pdf embed. after open this link http://thewebcodes.com/index.php?id=2 when we go to the first menu option, it goes behind (this only appens in Internet Explorer) How could i solve it? Thank's in advance Hello, I have a webpage with several html anchors. The anchor part works ok, but when I click on the links, I only goto to the part of the page with all the anchors (all anchors are gathered low in the page) and I wanted to know if there is any way of highlighting the specific anchor that the user has clicked on. Thank you. I have an <a> tag which when you hover has the background turn grey, but it only highlights the section around the text but I would like it to be a bigger area around it. Like having text centered in a table cell and whe you hover the background turns grey. Any ideas? HI, Greetings, I would like to put a link at webpage A, eg Code: <a href="http://www.example.com"> HUHULALA </a> then when someone clicks on it, then it will link to webpage B and the page will display and highlight all the words, HUHULALA. Can we actually do that? thanks. I have a Web Page with the following HTML code: <div id= "BlockA" > <div style="position:absolute;left:31.82px;top:79.70px" class="cls_005">Text 1</div> <div style="position:absolute;left:340.70px;top:79.70px" class="cls_005">Text 2</div> <div style="position:absolute;left:31.10px;top:92.90px"> <span class="cls_005">Text 3</span> <span class="cls_002">Text 4</span></div> <div style="position:absolute;left:105.02px;top:92.90px" class="cls_005">Text 5/div> </div> "BlockA" is usually displayed without highlighting. However, under certain circumstances (as controled by my Web App), I would like to highlight (e.g. with backgroundcolor = "yellow") "Block A" when the Web page is displayed. The highlight should not change the classes in the div and span within "BlockA". Can anyone suggest how can I do this? Thanks in advance. sg2000 I am doing a simple calendar. I managed to do the table with days etc. I have a problem I wish to highlight a number and the cell automatically according to the date of the day. Can Someone help please? Thanks & best regards Hi all, I have a very simple html file with table rows/columns. I implemented a feature where if you click once anywhere in a row, the row becomes 'highlighted' (modify the background color). The problem, and the thing I want to eliminate, is that the specific character/word that you click on also becomes highlighted. How can you keep the system from highlighting words/characters that you click on? I hope this is an easy one. Thanks, Bill HTML Code: <html>
<head>
<script type='text/javascript'>
var currentRow=-1;
function SelectRow(newRow)
{
for (var i = 1; i < 4; i++)
{
var cell=document.getElementById('cell_'+newRow+','+i);
cell.style.background='#AAF';
if (currentRow!= -1)
{
var cell=document.getElementById('cell_'+currentRow+','+i);
cell.style.background='#FFF';
}
}
currentRow=newRow;
}
</script>
</head>
<body>
<table border=1>
<tr>
<td onclick='SelectRow(1)' id='cell_1,1'>cell1_1</td>
<td onclick='SelectRow(1)' id='cell_1,2'>cell1_2</td>
<td onclick='SelectRow(1)' id='cell_1,3'>cell1_3</td>
</tr>
<tr>
<td onclick='SelectRow(2)' id='cell_2,1'>cell2_1</td>
<td onclick='SelectRow(2)' id='cell_2,2'>cell2_2</td>
<td onclick='SelectRow(2)' id='cell_2,3'>cell2_3</td>
</tr>
Hi all, I don't exactly know what to call it, apart from the explanation to what I want to do. Basically, I have a HTML page. On their, I have a text box and a search button and some text in a table. What I want to do is, when typing something in the box, clicking search will then jump to a part of the page and 'highlight' what is typed into the box. Ideally, the page will run in either HTML but I can use ASP. Unfortunately I cannot use PHP. Could anyone please help or give me some advise on this? Ok, you know how you can drag the mouse over any amount of normal text and the text gets that blue border around it. Try doing the same with an input box and you can only highlight the text of one input box at a time. How can I highlight the text from multiple form input boxes at once? Hi All, I was able to Highlight in yellow a sentence. But it doesn't work on the Option / Drop Down Menu sentence. Please HEEEELLLLP me find my mistake(s) BELOW: Code: <!DOCTYPE html>
<head>
<title> Yellow Hightlight </title>
</head>
<body bgcolor="#00CCFF">
<script type="text/javascript">
window.onload=function()
{
document.getElementById('NewsletterList').onchange=function()
{
window.location=('http://www.example.com/'+this.value+'');
}
}
</script>
<select id="NewsletterList">
<option value=""><P> <FONT style="BACKGROUND-COLOR: yellow"> PLEASE SELECT THE FOLLOWING: </FONT> CLICK This Box and Select!</P> </option> <!--this option takes you to your home page-->
<option value="xxxxx">yyyy</option><!--this option takes you to
.
.
.
.
.
</body>
</html>
|
|||||||