Web Development

Highlight a button on mouse hover

30-Jun-13 19:30

Any help?

modified 1-Jul-13 2:15am.

CSS-Sprites question

vkEE26-Jun-13 5:06

vkEE

26-Jun-13 5:06

Hello,

I do apologize if this is the incorrect forum - there is not one set up for HMTL related questions.

I am new to sprites concept. With that said, I have generated a sprite using a tool available on web.

This sprite has 5 images.

Now, I want to display the images on different locations on a given page. The first image right corner. Second image is 3/4 down the page on left side.

I created a navigation list for first image. Please see below. I have specified the the top at 45px. How would i manipulate the second image now, to show at different locations on the same web page? Would I add another navigation list and work that way? Is there a way I can control the location of image in #advsearch specification? Thank you!

HTML

<style>
       #navlist {position: relative;}
       #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:45px;}
       #navlist li, #navlist a {height:23px;display:block;}

       #advsearch {left: 650px;width: 136px;}
       #advsearch {background:url('CSS_Sprite_1.png') 0 0;}
   </style>

XML

<body>
     <ul id="navlist">
        <li id="advsearch"><a href="http://search.com/"></a></li>
    </ul>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>

astrixtech26-Jun-13 2:53

26-Jun-13 2:53

Hi ,
I am creating a list in sharepoint with two buttons for creating and getting the details of the list item.Here,when the user is hovering the mouse on buttons,the buttons should be highlighted. I have put the below code in css for changing the color.

btn:hover
{
background-color:Silver;
}

Here,btn is the class name. But this didnt bring the expected change. What am I missing? Pls help.

Graham Breach26-Jun-13 3:32

Graham Breach

26-Jun-13 3:32

If "btn" is the class name, you are missing a '.' character in front:

CSS

.btn:hover
{
   background-color:Silver;
}

Blikkies26-Jun-13 3:34

26-Jun-13 3:34

You forgot to add the . in front of you class name, should look as follows:

CSS

.btn:hover   
{   
      background-color:Silver;   
}

astrixtech26-Jun-13 20:13

26-Jun-13 20:13

Actually its a typo from my side when entered the question.Still its not working.

Blikkies26-Jun-13 20:57

26-Jun-13 20:57

Is the btn class in a style sheet or in a tags in the page?

astrixtech26-Jun-13 21:14

26-Jun-13 21:14

It is in the style sheet.
And for the button I have mentioned the class as btnhover.

Blikkies26-Jun-13 21:24

26-Jun-13 21:24

Here is few things you can check

Make sure the style sheet is correctly referenced in you page.
Make sure that there is no other styles overwriting the btn:hover class
Make sure that the default btn style background-color does not have !important after it

If nothing works, try adding !important to you background-color style in you .btn:hover class e.g.

CSS

.btn:hover   
{   
      background-color:Silver !important;   
}

If the problem still exists, provide more html and style sheet code

astrixtech27-Jun-13 2:15

27-Jun-13 2:15

The following is the button that I have created.I havent mentioned background color for default style.

<input name="btnOkay" class="btn" title="btnOkay" disabled="disabled" type="button" value="Okay" style="background: -webkit-linear-gradient(#53B7E8, #214D6B);
background: -moz-linear-gradient(to bottom, #53B7E8, #214D6B);
background: -ms-linear-gradient(#53B7E8, #214D6B);
background: -o-linear-gradient(#53B7E8, #214D6B);
background: linear-gradient(to bottom, #53B7E8, #214D6B);
position:relative;
left: 50%;
top:50%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53B7E8',
endColorstr='#214D6B');zoom: 1;width:150;height:30;border-radius:10px;color:white;">

Still it doesnt work.

astrixtech27-Jun-13 2:38

27-Jun-13 2:38

Hey
Theres some improvement in the issue.I have made the below changes

input name="btnOkay" class="btn" title="btnOkay" disabled="disabled" type="button" value="Okay" style="position:relative;left: 50%;top:50%;zoom: 1;width:150;height:30;border-radius:10px;color:white;" /></div>

Now its showing the color change. But I have to do some more modifications like , the button shouldnt highlight when its disabled. Currently its highlighting irrespective of the disable status.Should I use JQuery to apply this logic or is there any other alternative?

Blikkies27-Jun-13 2:53

27-Jun-13 2:53

you can add another class .btn:disabled and add you styles that must show when the button is disabled e.g.

CSS

.btn:disabled 
{ 
   backgrouund-color: grey; 
}

But I think you have to add !important so that the .btn:hover does not overwrite the new class

astrixtech27-Jun-13 3:02

how to develop webui like cloudify webui console?

27-Jun-13 3:02

Just now I have tried this code. One thing I have noticed is that , in the sharepoint designer, the properties that listed out once I wrote '.btn:' didnt contain 'disabled'. Still I have put the code as told,but the result is the same. I have mentioned !important also. But with no change in the result.

dk 30325-Jun-13 19:45

dk 303

25-Jun-13 19:45

i need to develop webui like cloudify webui console. so what kind of technologies i need to use for that?
or can anyone tell me what kind of technologies used by cloudify webui?

Re: how to develop webui like cloudify webui console?

Dennis E White25-Jun-13 20:27

Dennis E White

25-Jun-13 20:27

dk 303 wrote:
what kind of technologies i need to use

maybe I am over simplifying the answer...

HTML, CSS3, javascript.

A large part of course will depend on the platform that you build to host all this work. You can use Node[^,] Rails[^], PHP[^], or of course ASP.Net[^]. All of them will work it just depends on which you prefer.

In my consulting role I would tell clients the best platform to use is the one that your developers will be able to support.

Hopefully this helps a bit.

you want something inspirational??

Re: how to develop webui like cloudify webui console?

dk 30325-Jun-13 20:42

dk 303

25-Jun-13 20:42

Thanks,

i have done little research on javascript frameworks so i come to know that angular.js is simple and there no need to write more code. and even i did research on java,php kind of languages but there i got new name called groovy and grails so i go through grails documentation. so both are simplified version of java. no need to write lengthy code.

oky first let me tell you about my concept,
actually i'm developing project which is based on 3 cloud frameworks called cloudify,libcloud and opennebula as a background. and i gonna use some features from all above frameworks and merge it in my product. so for that i need to develop one front-end which can integrate with all three cloud framework. so i m looking for technologies which is efficient as well as light weight to make my front-end.

so please give something inspirational suggestion on this.

thanks Smile | :)

msxml2 parsing svg

Jonathan Davies23-Jun-13 9:09

23-Jun-13 9:09

I'm trying to open my .svg files and set the height and width attributes to 100% so that my graphics appear correctly on my web pages as recommended here http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html[^]. Having looked around the net at many possible solutions to them not floating and sometimes appearing with scroll bars this appeared to be the one to go for.

So having written some C++ using MSXML2 from a VS2008 C++ on windows8 (using

C++

msxml6.h

) to change these attributes in all my svg files I find it works on some (inkscape) and not others (graphviz dot).

The returned reason, is:

CSS

Could not load file, Reason: Parameter entity must be defined before it is used. Source String: %svg-prefw-redecl.mod;]]>

Reports of MSXML not handling this are all over the net, the problem code seems to be in in

http://www.w3.org/2000/svg[^] for example:

<!-- Pre-Framework Redeclaration Placeholder ..................... -->
<!ENTITY % svg-prefw-redecl.module "IGNORE" >
<![%svg-prefw-redecl.module;[
%svg-prefw-redecl.mod;]]>

- can anyone recommend a way to proceed?

modified 24-Jun-13 7:55am.

RedDk24-Jun-13 11:21

RedDk

24-Jun-13 11:21

I've run into similar scenarios in my project; converting .svg "coordinates" into valid .xml content ... have you tried just lopping off the header and bolting on the standard .xml document preamble?

Jonathan Davies24-Jun-13 22:40

24-Jun-13 22:40

Hi,
Re bolting on standard XML preamble: I've now started using the Inkscape XML editor to open and save my GraphViz Dot .svg files, doing this way is time consuming but at least this brings some consistency. It also removes the need to use a program to edit the width and height which was what was failing.

I'm now getting all my .svg files displaying nicely in IE10, no scroll bars, and when the my IE10 window gets too narrow they shrink to fit: http://www.jgdprojects.co.uk/ModelUse.htm[^]

But in IE8 mode neither ,svg or ,png are currently appearing, just white spaces...

RedDk25-Jun-13 3:58

RedDk

25-Jun-13 3:58

Good morning,

Are you sure that it's just blank? Or does a right-click context menu provide you with several options. Options such as "zoom-in", "zoom-out", "Save svg as", etc?

As you say, and as I belabored the post with programming lingo, doing the same on a .png (or a .jpg for that matter) will/should show "save-as" but there's no scalar operation.

Off the subject, but on CP (codeproject), I'm using IE8 now and as far as I know without free svg-viewer plugins (although several Adobe apps are installed), do you have troubbles signing-in to the site? This Alt+mouse-click behavior required to get my name and password on the control lines is driving me to stow my harpoon!

Jonathan Davies25-Jun-13 4:55

25-Jun-13 4:55

Definitely blank. I've used Fiddler as recommended to me in my last svg query (below this one) and I can see that using

IE10 in IE8 mode, the server is sending .svg and .png (as expected) and the browser is displaying
the .svg.

However using IE10 in IE8 mode Fiddler shows only the .svg being sent when I expected the .png.

I'm going to setup an XP PC with Windows 8 to see what really happens with IE8.

I've not noticed any problems signing in.

png graphics used when I expected svg

RedDk25-Jun-13 5:19

RedDk

25-Jun-13 5:19

I wonder ...

I use Dreamweaver for a lot of xml/html/http(sleuthing/etc)/css. And recently have signed on to style sheets as programming commitment (that is, to be studied at some point in time) and JUST discovered the F12 key which in IE8 brings up this whole Developer Tools scenario.

Might F12 and the four tabs of this interface give you a leg up on some scripting function or method that is being allayed when it comes time to see client side content? This migght actually name a script from whichh the detective work might take a better direction.

I've looked up Fiddler but haven't downloaded it. And as far as website entities, have only dealt with the lack of ability to do any real programming with ASP.NET (or SQL Server as result) due to basic cost limmitation. Thinking about springing though. Smile | :)

Jonathan Davies14-Jun-13 3:27

Re: png graphics used when I expected svg

14-Jun-13 3:27

I've written my first real web page: one .html file and one .css file with .svg and .png drawings in a images sub-directory using VS2008 as an editor and Inkscape and Graphviz Dot to generate the .svg and .png graphics.

When I open the page from my Windows 8 PC using IE10 the .svg graphics are used, but when I upload it to the server I use, and open it using IE10 the .png graphics are loaded instead.

http://www.jgdprojects.co.uk/HTMLPage.htm[^]

I've used IE10 Dev Tools to validate the HTML5 and CSS and all seems fine according to the IE10 Dev Tools, apart from IE10 Compatability Mode and IE7 mode when I get a '404 - File or directory not found' message which I haven't yet investigated but presume is unrelated. Haven't tested with other browsers yet.

Any idea as to why I don't see the .svg graphics online appreciated?

Richard Deeming14-Jun-13 7:48

Richard Deeming

14-Jun-13 7:48

The simplest way to diagnose a problem like this is to use Fiddler[^].

All of the SVG files on your server are returning "404 - File not found" errors. The most likely cause is that IIS on the server doesn't have a MIME type configured for SVG files. As a security measure, IIS will not return static files which don't have a MIME type configured.

There's information on adding the MIME types on the IIS site[^], using either the web.config file[^] or IIS Manager[^].

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: png graphics used when I expected svg

Jonathan Davies14-Jun-13 11:36