Search Results

Search found 1498 results on 60 pages for 'hover over'.

Page 52/60 | < Previous Page | 48 49 50 51 52 53 54 55 56 57 58 59  | Next Page >

  • jqtouch - panels appear on page, class="back" not working in Safari

    - by user564816
    I'm trying to get a demo working that was used in J. Stark's webinar on Safari Books Online (still available for viewing). I think I've followed the code example correctly, but the class="back" objects used to return from the "blog", "contacts", "settings" and "about" panels do not work, though the correct address shows in the nav area at the base of the browser window when I hover the mouse over the respective link. The panels-- which should slide in and out when called by their respective class"arrow" elements-- appear on the main page, nor do they animate correctly. Browser is Safari 5.0.3(6533.19.4); jquery-1.3.2; jqtouch freshly downloaded from the jqt website. Obviously I'm missing something simple. I'd sincerely appreciate anyone's help who sees what I'm doing wrong. Thanks for considering my question. View the app and source code (use view source in your browser) here. Sat 8 January 2011: 1 48 AM UPDATE in response to JS's comments: Most humble thanks for your note. Didn't want to impose on your server, so the URL for jqtouch.min.css points to a version on my server @ fastermac.net. There's something further amiss, I believe. On load, page still shows the elements that should be invisible until called by clicking class="arrow" elements. Animations not yet wiggling. Did get them to wiggle at one point, but "flip," for instance, landed then on a black page-- not the targeted panel. Probably something obvious, but I'm missing it after some considerable due diligence. Again, thanks for your note. Any further illumination would be sincerely appreciated.

    Read the article

  • finding links that are hyper-links in jQuery

    - by Jacob Lowe
    Im trying to take a link either when clicked or hover over be able to grab the attribute href and tell if its a hyper-link or not. Also i want it to be able to tell me if its a hyper-link to my own site. Plus various other filters. The main purpose for this is so that when a internal link is clicked it will tell ajax to grab the content, alot of my links are generated (via wordpress)so I can't modify them too much. Another purpose for this is so i can also make all external links open on a new window. I have a solution that works on a simple test page but when i put into a working page it breaks. I know i am probably making this harder then it should be. Here is my code $(function(){ $('a').live('click', function(){ var x = $(this).attr('href'); $(this).parent('div').append('<div id="test">' + x +'</div>'); $('#test:contains("http")').css('color', 'red'); $('#test:contains("sitename")').css('color', 'black'); $('#test:contains("admin")').css('color', 'red'); if($('#test').css('color') == 'red'){ alert('external link'); $('#test').remove(); return true; }else{ alert('external link'); $('#test').remove(); return false; } }); }); thanks for you help

    Read the article

  • controlling css with javascript works with mozilla but not with webkit based browsers

    - by GlassGhost
    Im having problems with applying css text variable in this javascript with webkit based browsers(Chrome & Safari) but it works in firefox 3.6 the function: function addGlobalStyle(sCss) { var head = document.getElementsByTagName('head')[0]; if( !head || head == null ) { return false; } var oStyle = document.createElement('style'); oStyle.type = 'text/css'; oStyle.rel = 'stylesheet'; oStyle.media = 'screen'; if ( is_gecko ) { // firefox WORKING !!! oStyle.href = 'FireFox.css'; oStyle.innerHTML = sCss; head.appendChild(oStyle); return true; } else {//nothing but firefox works oStyle.href = 'FireFox.css'; oStyle.innerHTML = sCss; head.appendChild(oStyle); return true; } } the use of the function: var NewSyleText = //The page styling "h1, h2, h3, h4, h5 {font-family: 'Verdana','Helvetica',sans-serif; font-style: normal; font-weight:normal;}" + "body, b {background: #fbfbfb; font-style: normal; font-family: 'Cochin','GaramondNo8','Garamond','Big Caslon','Georgia','Times',serif;font-size: 11pt;}" + "p { margin: 0pt; text-indent:2.5em; margin-top: 0.3em; }" + "a { text-decoration: none; color: Navy; background: none;}" + "a:visited { color: #500050;}" + "a:active { color: #faa700;}" + "a:hover { text-decoration: underline;}"; addGlobalStyle(NewSyleText);//inserts the page styling

    Read the article

  • CSS Drop Down Menu

    - by cvandal
    I'm trying to make a simple CSS drop down menu that when you mouse over a link, the sub menu appears. I've managed to achieve this when you mouse over an li but can't figure out how to do it using a link. The reason why I'm trying to do this using a link rather than the li is that my menu width is 100% and the li spans a greater area than the link so if you mouse over that area, the sub menu appears when you don't want it to. My CSS is as follows: .menu { border: solid 1px red; font-size: 5em; font-family: 'Raleway', arial, serif; } .menu ul { } .menu ul.children { display: none; } .menu ul li { margin: 20px 0 10px 0; } .menu ul li:hover ul.children { display: block; position: absolute; } .menu ul li a { padding: 10px 10px 0 40px; background: rgba(0,0,0,0.5); color: #fff; text-decoration: none; }

    Read the article

  • IE7 Debug Issue - Word Breaks in <li>

    - by JCHASE11
    Hello, I am having a very basic problem in IE7 that I cannot seem to fix. If you look at this page: http://vitaminjdesign.com/IAM/company/ you will notice that the vertical nav (ul id="leftcol") is displaying incorrectly in IE7. Each word appears on its own line. Here is my HTML /. CSS: <ul id="leftcol"> <li><a class="active" href="#">Company Overview</a></li> <li><a href="#">Why Choose Parker?</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Financing Promotions</a></li> <li><a href="#">Licensing & Credentials</a></li> </ul> ul#leftcol{float:left; width:185px; position:relative; z-index:10;} ul#leftcol li{float:right; clear:right; margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; } ul#leftcol li a{color:#505050; text-decoration:none; font-size:15px; float:right;} ul#leftcol li a.active,ul#leftcol li a:hover{color:#89b060;} Any ideas?

    Read the article

  • jQuery only apply to current li

    - by kylex
    I want to slide toggle the second level ul when I mouse over the relevant first level li. Currently the script displays all secondary ul on a mouseover. <div id="subNav"> <ul> <li>One</li> <ul> <li>SubOne</li> </ul> </li> <li>Two</li> <li> <ul> <li>SubTwo</li> </ul> </li> </ul> </div> And here is my jQuery $("#sideNav ul li").hover( function(){ $('#sideNav ul li ul').slideDown(); }, function(){ $('#sideNav ul li ul').slideUp(); } );

    Read the article

  • Added a Facebook badge, throwing off footer placement

    - by Kevin
    Added the for the facebook badge to the site and now it's thrown my placement for the footer off .. it's working fine in Chrome, but IE, FFox and Opera all experiencing problems... Here is a screenshot: The footer (brown bar) is supposed to be at the bottom... Here is the CSS : /* footer */ #footer{ background:url(../images/bg-footer.png) no-repeat; height:26px; overflow:hidden; padding:35px 0 0 55px; font-size:11px; } #footer p{ margin:0; display:inline; color:#766623; } #footer ul{ margin:0; padding:0; list-style:none; display:inline; } #footer li{ display:inline; background:url(../images/sep-f-nav.gif) no-repeat 100% 55%; padding:0 6px 0 0; position:relative; } * html #footer li{ padding:0 3px 0 3px; } *+html #footer li{ padding:0 3px 0 3px; } #footer a{ color:#30481f; text-decoration:none; } #footer a:hover{ text-decoration:underline; /*Facebook badge Holder*/ .fb-area{ width:287px; padding:0 0; margin:0 0; min-height:100%; }

    Read the article

  • Where can I find a powerful, standards compliant, web-based interactive org chart API?

    - by Adam Soltys
    Hi, I'm looking to build an interactive web-based org chart for a large organization. I somewhat like the interface at ancestry.com where you can hover over people and pan/zoom around and click on different nodes to make them the root. Ideally, I'd like it if people could belong to multiple organizational entities like committees, working groups, etc. In other words the API should support graphs in general, not just trees. I'd like to be able to visually explode each organizational substructure into substituents by clicking on it, with a nice animation of the employees ballooning or spilling out so you can really interactively drill down through the organization. I found http://code.google.com/apis/visualization/documentation/gallery/orgchart.html but it looks a bit rudimentary. I know there are desktop tools like OrgPlus and Visio that can build static charts but I'm really looking for a free, web-based API with open standards-based output like SVG or HTML5 Canvas elements rather than Flash or some proprietary output. Something I can embed into a custom web application and style myself. Something interactive.

    Read the article

  • How to avoid mouse move on Touch

    - by VirtualBlackFox
    I have a WPF application that is capable of being used both with a mouse and using Touch. I disable all windows "enhancements" to just have touch events : Stylus.IsPressAndHoldEnabled="False" Stylus.IsTapFeedbackEnabled="False" Stylus.IsTouchFeedbackEnabled="False" Stylus.IsFlicksEnabled="False" The result is that a click behave like I want except on two points : The small "touch" cursor (little white star) appears where clicked an when dragging. Completely useless as the user finger is already at this location no feedback is required (Except my element potentially changing color if actionable). Elements stay in the "Hover" state after the movement / Click ends. Both are the consequences of the fact that while windows transmit correctly touch events, he still move the mouse to the last main-touch-event. I don't want windows to move the mouse at all when I use touch inside my application. Is there a way to completely avoid that? Notes: Handling touch events change nothing to this. Using SetCursorPos to move the mouse away make the cursor blink and isn't really user-friendly. Disabling the touch panel to act as an input device completely disable all events (And I also prefer an application-local solution, not system wide). I don't care if the solution involve COM/PInvoke or is provided in C/C++ i'll translate. If it is necessary to patch/hook some windows dlls so be it, the software will run on a dedicated device anyway. I'm investigating the surface SDK but I doubt that it'll show any solution. As a surface is a pure-touch device there is no risk of bad interaction with the mouse.

    Read the article

  • Background image css opera issue

    - by user356243
    Am having an issue in opera. I have a series on hyperlinnks in a ul li with backgorund images applied. The pointer cursor isnt displaying when I hover over the links. Is this a know bug, code below /cricket" title="Cricket" id="cricket-link" style="background-image:url(/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg);" onmouseover="$().hoverSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bghover.jpg', 'cricket'); return false;" onmouseout="$().originalSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg', 'cricket'); return false;"Cricket #sidebar ul { margin: 0; padding: 0 0 27px 16px; display: block; float: left; width: 180px; } #sidebar ul li { background-image: url(images/left-nav-bg.jpg); background-repeat: no-repeat; margin: 0; margin-bottom: 10px; padding: 0; display: block; float: left; width: 180px; height: 40px; list-style-type: none; cursor:pointer !important; } #sidebar ul li a { background-repeat: no-repeat; background-position: 2px 2px; margin: 0; padding: 8px 8px 0 4px; display: block; float: left; width: 168px; height: 32px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; text-align: right; cursor:pointer !important; }

    Read the article

  • Ajax return string links not working

    - by Andreas Lympouras
    I have this ajax function: function getSearchResults(e) { var searchString = e.value; /*var x = e.keyCode; var searchString = String.fromCharCode(x);*/ if (searchString == "") { document.getElementById("results").innerHTML = ""; return; } var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("results").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "<%=Page.ResolveUrl("~/template/searchHelper.aspx?searchString=")%>"+searchString, true); xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); //solve any AJAX caching problem(not refreshing) xmlhttp.send(); } and here is when I call it: <input class="text-input" value="SEARCH" id="searchbox" onkeyup="javascript:getSearchResults(this);" maxlength="50" runat="server" /> and all my links in the searchHelper.aspx file(which retruns them as a string) are like this: <a class="item" href='../src/actors.aspx?id=77&name=dasdassss&type=a' > <span class="item">dasdassss</span></a> When I click this link I want my website to go to ../src/actors.aspx?id=77&name=dasdassss&type=a but nothing happens. When I hover over the link, it also shows me where the link is about to redirect! any help?

    Read the article

  • layout problems with site

    - by user1506962
    I have a problem with my site. When I resize the window everything stays still and doesn't move, the window just crosses over everything. Here are the images to epxlain it a bit better.. hopefully. This is the site in normal window - http://imageshack.us/photo/my-images/407/problem2a.jpg/ and when resized - http://imageshack.us/photo/my-images/696/problemim.jpg/ Can anyone tell me what the problem is? I would like my layout to work like this website - http://www.thisoldbear.com/ -----EDIT----- body { width: 1400px; -ms-overflow-x: hidden; overflow-x: hidden; background: url(../../core/images/bg.png); font-family: 'Pontano Sans', sans-serif; } #logo { background: url(../../core/images/logo.png); width: 124px; height: 171px; margin: -86px 185px; } nav { margin: 0 300px; } a { text-decoration: none; font-size: 17px; color: #f4f4f4; outline: none; padding-left: 50px; } a:hover { text-decoration: underline; } p { font-size: 22px; color: #444; } h2 { font-size: 29px; color: #444; } header { background: url(../../core/images/header.png); padding: 32px; margin: -8px -8px; } .content { padding: 10px; width: 700px; border-top: 4px solid #d55d58; margin: 100px 200px; } .break { margin: -50px 0; }

    Read the article

  • Jquery :not()selector

    - by kim
    <html lang="en"> <head> <style> #thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;} div.block {margin-top:10px; width:200px;} div#thisdiv a {color:#fff;} </style> </head> <body> <div id ="one" class="block"><a href="">one</a></div> <div id="thisdiv">hello</div> <div id ="two"class="block">two</div> <div id ="three"class="block">three/div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $('#one').hover(function() { $('#thisdiv').fadeIn(400); }); $('div:not(#thisdiv)').mouseleave(function() { $('#thisdiv').fadeOut(400) }); }); </script> </body> </html> #thisdiv doesn't fadeOut. I could have used the following, but it only fades out if the cursor mouse outs of #thisdiv. Is there any way i can solve this so when the cursor navigates away from anyway, the div still fade out. $('#thisdiv').mouseleave(function() { $('#thisdiv').fadeOut(400) }); I couldn't figure out what's why jquery's :not selector is not doing what I wanted to. Am i using it wrongly?

    Read the article

  • Is there a way to capture a bitmap from a WPF window using native C++?

    - by Mike Caron
    Imagine a document window in a MDI application which contains a child WPF window, say a sidebar for example. How can one get a bitmap containing both the WPF pixels AND the GDI (non-wpf) pixels? I've discovered that when making my thumbnail preview for the Win7 taskbar app icon hover, I get black in the parts of the preview where the WPF pixels should be. My current method simply grabs a bitmap capture of the document window. Then I get a DC for the preview, make a memory DC from it and select my bitmap into it. Then I do some size adjustments and bitblt the memory dc to the real dc. I'm guessing that the BitBlt operation doesn't take into account the fact that the WPF pixels are hardware accelerated and therefore need to be grabbed from the graphics hardware. All the stuff in GDI is managed just fine, though and when there's no WPF child windows, the preview image looks fine. I'm wondering if it's at all possible to grab a bitmap of the WPF window from native C++. Then I can blt that onto the black area of the previous preview.

    Read the article

  • CSS refuse to obey

    - by Frank
    Hi, I'll make this short, I got this webpage : <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="Stylesheet" type="text/css" href="css/style.css" /> <link rel="Stylesheet" type="text/css" href="css/nav.css" /> </head> <body> <div id="header"> <ul id="navList"> <li><a href="#" id="navActive">foo</a></li> <li><a href="#">bar</a></li> </ul> </div> </body> </html> With this CSS style.css body { padding:0; margin:0; background-color:#000000; background-repeat:no-repeat; background-image:url('../img/bg.jpg'); } nav.css #navList { padding:0; margin:0; background-image:url('../img/menu.png'); list-style-type:none; padding:12px 150px; } #navList li { display:inline; } #navList li a { color:#bfbfbf; padding:14px 25px; text-decoration:none; } #navList li a:hover { color:#000000; background-color:#bfbfbf; text-decoration:none; } #navActive { color:#000000; background-color:#bfbfbf; } It looks like the CSS from the navActive id is never being applied... Could someone tell me why and/or suggest me a way to correct this. Thanks.

    Read the article

  • Dynamic content in a Gridview

    - by mariki
    I have a gridview with couple of columns,I want to achieve the following: If user is NOT authorized display normal columns. If user IS authorized: set mouseover event for first column text and display some buttons (that are not available for NOT authorized users) in a second column when user hover over(using javascript) the first column. I am have 2 difficulties: The first one where and when should I create the buttons? I have 2 options, I can create those button on design time, in gridviews template and just set Visible value to false and then in codebehind set it to true if user is authorized. The second option would be creating this buttons dynamically in gridview_RowCreated event (or any other event) if user is authorized. The Second difficulty is setting the javascript event to show the buttons, the event should be added only if user is authorized! Note that event and buttons should have some kind of id match for Javascript function to know what should it hide/unhide when event is triggered. What should I do, what is the best practice? I know this is a long question, but please try to help :)

    Read the article

  • jQuery Drill down selector ?

    - by Etienne
    Hi, I have made this piece of code that makes a roll hover effect on any image you add the class 'simplehover' to it : //rollover effect on links $(".simplehover").mouseover(function () { $(this).attr("src", $(this).attr("src").replace("-off.", "-on.")); }).mouseout(function () { $(this).attr("src", $(this).attr("src").replace("-on.", "-off.")); }); <img src="slogan.gif" class="simplehover" /> Im trying to get it work if you add the class 'simplehover' to the surrounding element : . (especially usefull for ASP.net asp:HyperLink tag which automatically generate the IMG tag inside the hyperlink. <a href="#" class="simplehover"> <img src="slogan.gif" /> </a> If I change my selector for : $(".simplehover img") , it will work, however it no longer works in senario #1. I tried this with no luck: $(".simplehover").mouseover(function () { if ($(this).has('img')) { $(this) = $(this).children(); } ... Anyone can figure this out?

    Read the article

  • jQuery && Google Chrome

    - by Happy
    This script works perfectly in all the browsers, except Google Chrome. $(document).ready(function(){ $(".banners-anim img").each(function(){ var hover_width = $(this).width(); var hover_height = $(this).height(); var unhover_width = (hover_width - 30); $(this).width(unhover_width); var unhover_height = $(this).height(); $(this).closest("li").height(unhover_height); var offset = "-" + ((hover_height - unhover_height)/2) + "px"; $(this).closest("span").css({'position':'absolute', 'left':'0', 'top':'25px', 'width':'100%'}); $(this).hover(function(){ $(this).animate({width: hover_width, marginTop: offset}, "fast") },function(){ $(this).animate({width: unhover_width, marginTop: 0}, "fast") }); }); }); Chrome doesn't recognize changed image attributes. When width of the img changes, height also changes. Even not in Chrome.. $(this).width(unhover_width); var unhover_height = $(this).height(); unhover_height gives 0. Full code of this script (html included) - unhover_height Please help to fix this. Thanks.

    Read the article

  • Why in the world is this Moq + NUnit test failing?

    - by Dave Falkner
    I have this dataAccess mock object and I'm trying to verify that one of its methods is being invoked, and that the argument passed into this method fulfills certain constraints. As best I can tell, this method is indeed being invoked, and with the constraints fulfilled. This line of the test throws a MockException: data.Verify(d => d.InsertInvoice(It.Is<Invoice>(i => i.TermPaymentAmount == 0m)), Times.Once()); However, removing the constraint and accepting any invoice passes the test: data.Verify(d => d.InsertInvoice(It.IsAny<Invoice>()), Times.Once()); I've created a test windows form that instantiates this test class, runs its .Setup() method, and then calls the method which I am wishing to test. I insert a breakpoint on the line of code where the mock object is failing the test data.InsertInvoice(invoice); to actually hover over the invoice, and I can confirm that its .TermPaymentAmount decimal property is indeed zero at the time the method is invoked. Out of desperation, I even added a call back to my dataAccess mock: data.Setup(d => d.InsertInvoice(It.IsAny<Invoice>())).Callback((Invoice inv) => System.Windows.Forms.MessageBox.Show(inv.TermPaymentAmount.ToString("G17"))); And this gives me a message box showing "0". This is really baffling me, and no one else in my shop has been able to figure this out. Any help would be appreciated. A barely related question, which I should probably ask independently, is whether it is preferable to use Mock.Verify(...) as I have here, or to use Mock.Expect(...).Verifiable followed by Mock.VerifyAll() as I have seen other people doing? If the answer is situational, which situations would warrent the use of one over the other?

    Read the article

  • CSS: position:absolute inside position:relative, but not affecting parent?

    - by JP
    <style> #special p { display:none; } #special:hover p { display:block; } </style> <table> <tr> <td style="width:200px">Things</td> <td style="position:relative; width:220px"> <div style="position:absolute;right:0" id="special"> <img id="shows" /> <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p> </div> </td> </tr> </table> Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?

    Read the article

  • Adding linked table to Access 2003 while keeping ODBC connection info in MDB

    - by webworm
    I have an Access 2003 database MDB where all of the tables exist as linked tables within SQL Server 2005. The MDB file contains all of the ODBC information that points to the correct SQL Server and log-on credentials (trusted connection). What I would like to do is add a new linked table to the MDB file however I am not sure how to go about specifying the ODBC connection information. When I try to add a new linked table I keep getting prompted to locate or create a DSN file. I don't want to have to create a new DSN entry on every machine, rather I would like all that information stored within the Access MDB file itself. In the existing database I can "hover" over the table names and see the ODBC connection info as a tool-tip. All I need to do is add another linked table using the same connection information. I do have access to the SQL Server where the tables are linked to,. I have already created the new table I wanted to add. I just need to find a way to link to it.

    Read the article

  • Website displays in chrome perfectly, but not in mozilla or IE

    - by Atharul Khan
    here are the code snippets for the html and css. It works finds in Google chrome, but when I try to display it in mozilla or IE, it shows something completely different. I cannot attach images as I do not have the required reputation. I really appreciate the help. Thank you! HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="shortcut icon" href="ak.png"> <title>Home</title> </head> <body> <div class="Nav"> <nav> <ul class="navigation fade-in2"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#shop">Shop</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> <div class="logo"><a href="#home"><img class="ak fade-in2" src="ak.png"></a></div> <div class="background"><img class="beauty" src="beauty.jpg"></div> <div class="header"> <h1 class="headerName fade-in">DESIGN | DEVELOP | BRAND</h1> <h4 class="service fade-in3"><a href="#portfolio">VIEW PORTFOLIO</a></h4> <h4 class="service fade-in3"><a href="#services">VIEW SERVICES</a></h4> </div> <!--<div class="mainbody"><p>safsdaf</p></div>--> </body> </html> CSS @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } * { padding: 0; margin: 0; } li { display: inline; font-size: 15px; font-family: verdana; } nav { width: 100%; text-align: right; background-color: #222222; padding: 0; margin: 0px; line-height: 47px; position: fixed; z-index: 100; } .ak{ width: 90px; height: 55px; z-index: 101; position: fixed; background: transparent; color: transparent; background-color: transparent; } .Nav a{ text-decoration: none; padding: 15px; } .Nav a:link{ color: #A7A7A7; } .Nav a:visited{ color: #A7A7A7; } .Nav a:hover{ color: #DBDBDB; transition: all 0.3s ease-out 0s; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-out; transition-delay: 0s; } .header { background-color: rgba(0,0,0, 0.25); width: 100%; height: 626px; text-align: center; position: fixed; z-index: 10; } .background { position: fixed; z-index: 8; } .beauty { width: 100%; height: 626px; } .headerName { font-size: 2.5em; text-align: center; color: #D3D3D3; padding: 180px; padding-bottom: 50px; margin: 0px; letter-spacing: 4px; font-weight: 100; font-family: 'Lato', sans-serif; } .fade-in { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 0.3s; -moz-animation-delay:0.3s; animation-delay: 0.3s; } .fade-in2 { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 0.6s; -moz-animation-delay:0.6s; animation-delay: 0.6s; } .fade-in3 { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-delay: 0.9s; -moz-animation-delay:0.9s; animation-delay: 0.9s; } .service{ font-size: 14px; width: 190px; text-align: center; font-family: 'Lato', sans-serif; color: #D3D3D3; border: 2px #A7A7A7 solid; border-color: rgba(255, 255, 255, 0.5); display: inline-block; border-radius: 5px; background-color: transparent; letter-spacing: 2px; } .service a{ text-decoration: none; display: block; padding: 15px 20px; } .service a:link{ color: #D3D3D3; } .service a:visited{ color: #D3D3D3; } .service a:hover{ background-color: rgba(255, 255, 255, 0.15); transition: background-color .15s ease-in; -webkit-transition: background-color .15s ease-in; -moz-transition: background-color .15s ease-in; -o-transition: background-color .15s ease-in; } UPDATE 1: I updated both browsers and it seems the css3 animations work perfectly fine on both browsers. What seems to be the problem is the positioning of the pages UPDATE 2: Here are the links to the different browser screen shots Chrome: https://www.dropbox.com/s/jlpa4vu51kdnews/Chrome.JPG InternetExplorer: https://www.dropbox.com/s/zbchs3su9ahxr0n/IE.JPG Mozilla Firefox: dropbox(.)com/s/fyalnhsha9ktadz/Mozilla.JPG (I can't post the third link because I don't have enough reputation)

    Read the article

  • How to use a divider in a navigation with list elements?

    - by Kris
    I want to create a navigation which got divider between each list element. Here is a simple HTML/CSS Code/Template : <nav> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> </ul> </nav> nav ul { list-style:none; float:right; } nav ul li { float:left; padding-left:10px; } nav ul li a { color:#111; font-family:Verdana; font-size:15px; text-decoration:none; } nav ul li a:hover { color:#9F3039; } so just a simple looking navigation which floats from the right side on a logo which is not displayed in the code here. Now I want to at devider between each link - I know I could do it with border-right and just use another class on my last listelement which set the border-right off, BUT I want to use a special kind of divider - an image. How can I do it best ?

    Read the article

  • Image sprite not lining up in firefox

    - by Saif Bechan
    I am working with an image sprite to create my buttons. They work right in every browser except firefox. Lets say i have 2 spans next to eachother: <span class="spanleft"></span><span class="spanright"></span> and give them some styling(this is the actual code i use for the sprite) .spanleft{ background:url('/templates/default/img/auction/btn-toolbar.png') no-repeat 0 0; display:block; float:left; height:100px; width:13px; } .spanright{ background:url('/templates/default/img/auction/btn-toolbar.png') no-repeat 0 -104px; display:block; float:left; height:100px; width:30px; margin-left:0px; } Now this works in every browser i tested, the images line up great. But in firefox I get a small offset. Now i fiddled with the pixels a lot. Its not an offset of 1px, the offset is about 0.5 of a px. yeah. Ive made a screenshot of what i mean, and i'm going to put in the sprite for the buttons, they make lovely buttons, upstate,downstate,hover,disabled. You can use them in your projects. Here are the shots: This is the problem: Here is the image sprite: I hop this problem can be solved, i am working with FF 3.6. thanks guys!

    Read the article

  • Background loading javascript into iframe with using jQuery/Ajax?

    - by user210099
    I'm working on an offline only help system which requires loading a large amount of search-related data into an iframe before the search functionality can be used. Due to the folder structure of the project, I am unable to use Ajax-related background load methods, since the files I need are loaded a few directories "up and over." I have written some code which delays the loading of the help data until the rest of the webpage is loaded. The help data consists of a bunch of javascript files which have information about the terms, ect that exist in the help books which are installed on the system. The webpage works fine, until I start to load this help data into a hidden iframe. While the javascript files are loading, I can not use any of the webpage. Links that require a small files be downloaded for hover over effects don't show up, javascript (switching tabs on the page) has no effect. I'm wondering if this is just a limitation of the way javascript works, or if there's something else going on here. Once all the files are loaded for the help system, the webpage works as expected. function test(){ var MGCFrame = eval("parent.parent"); if((ALLFRAMESLOADED == true)){ t2 = MGCFrame.setTimeout("this.IHHeader.frames[0].loadData()",1); } else{ t1 = MGCFrame.setTimeout("this.IHHeader.frames[0].test()",1000); } } Load data simply starts the data loading process. Thanks for any help you can provide.

    Read the article

< Previous Page | 48 49 50 51 52 53 54 55 56 57 58 59  | Next Page >