Posts by Violet_82

HI guys, I wonder if any could help with this. In my daily job I often find myself picking up code written by other developers and making additions to it. Now, this is often a problem because if I change a css rule I might end up breaking the layout of the site. Rather than looking throught the whole html code for a class name, if I want to change the look and feel or the position or any other style of an existing html element I usually add another class to that lement and target it in the css. I wonder, is there any tool out there that will instead allow me to check which HTML element uses a specific css rule, so that I will know exactly how many elements will break if I change that rule?
thanks

JorgeM, sorry to butt in but I thought that labels had to be used around any input to satisfy section 508?

Hi all, as much as I don't like the API, it is becoming more and more important for me to start using it. I think I might need a guide of some sort which says what's what and what's where, if anybody has one please let me know.
Today I was tyring to find out what events a component supports. I looked up the JTextField component http://docs.oracle.com/javase/7/docs/api/javax/swing/JTextField.html but I couldn't find anywhere an "event" section - unless I am doing something wrong which is quite likely. Anyway, where do I find the kind of events that components support? Like in the above case, where in the API do I find what events JTextField supports?
thanks

No sorry, I was just confirming :-)! thanks a lot for your help!

HI chaps,
sorry to reopen this, but I really fell like I have to.
I have gone through the ATM progam and now most of the things have become clearer (thanks also to JamesCherrill's explanation). I realized that what had confused me wasn't the syntax (which is in fact the same as anything else
and really easy to understand as you have pointed out) but it was that so far I had used only 2 classes in my programs: 1 with all the variables and methods and the class that contains the main method.
In this case instead, the author uses more than just two classes, in fact each component of the ATM is a class and performs actions adn therefore if a class A wants to use class B's methods then I have to first create a variable of
class B, then instantiate the B object and use the method in B to perform an action in class A.

thanks JamesCherrill, I think I understand. I had a look at your link, I will try to bear those advices in mind! :-)
cheers

ah ok, well yes it is quite simple actually.

But surely, I can declare int pin = getPin(); inside the Keypad class, rather than inside the ATM class. Now, I appreciate what you say about the ATM not being able to access its keypad and screen, but couldn't those classes be completely independent and still be able to access ATM? I mean, I am not trying to be annoying, I am just trying to understand this.

I guess I am a bit confused because in all the (simple) programs I have coded so far I have never come across this, and I had never needed to "interweave" classes this way.

HI thanks. Well, I think what worries me is the fact that in the class ATM I am declaring a variable of type Screen and Keypad. That's what's essentially troubling me and confusing me a bit.

Hi all,
I wonder if you can help me with this.
I am looking at a fairly long (well at least for me) java program, about 700 lines. Basically it's a very very basic simulation of an ATM that can run on a computer.
Now, in all the classes I have declared so far, I have invariably used variables of primitive type and sometimes reference-type, the latter usually declared in the
java file that contains the main method in. This time I have come across this situation:
Take a few classes:

public class ATM{
    ...
} 
public class Screen{
    ...
}

public class Keypad{
    ...
}

etc..
In class ATM we declare a few variables of primitive type and also a few reference-type variables, like so:

public class ATM{
    private int account;
    private double amount;
    private Screen screen;
    private Keypad keypad;  
} 

These reference-type declaration confuse me a bit. I know the reason why these have been declared (ATM needs to exchange information with Screen, Keypad etc) but I don't understand the mechanism. Does anybody have a short working example (not 700 lines :-)) that I can look at so I understand this correctly before delving into the ATM program?
thanks

sorry, I forgot to make it solved!

oops...I feel a bit silly now...It didn't occur to me that the usb would show up there. Well, at the moment it's at 65% of copying the windows files, so it will be another 20 hours at least based on the previous attempt, so I will see what happens when it finish and post back. Sorry for the confusion...

Uhm, this is getting really interesting now. I have taken the HD out and used a docking station to format it (and it is a 160GB HD and came up as 150GB). It all went ok. Then I put the HD back into the laptop and started the windows installation process again, and guess what? that W FAT partition is still there, and I still can't format it or delete it!! What is going on?! IS that some sort of reserved inaccessible partition that nobody can touch?! Screenshot attached

I have restarted the installation agian, trying to install the operating system on the C partition though, and again it is taking absolutely ages to copy the files. I checked the specs, it says usb 2.0 http://www.uktsupport.co.uk/advent/laptop/4213.htm so I really don't know what is going on...

Neither have I :-)! If even that fails then we know for sure it's the HD. Still, i thought that if one partition fails, the other one (the good one) shouldn't be affected by it

the laptop doestn' have a cd drive so everything is done via usb. Anyway, yes you're right, I should have been able to wipe all the partition, but this W partition (FAT) can't be deleted or formatted. If I attempt to delete it it says that there are system files and I can't delete it. If I try to format it it says that it is corrupted. I am thinking to remove the HD, put it on the docking station and try to format it from there. Then put it back and attempt to reinstall windows

ok thanks, I will have a look, however this morning after about 48 hours trying to install the windows files I found this message on the screen: "Windows could not start because of a computer disk hardware configuration problem. Could not read from the selected boot disk. Check boot path and disk hardware. Please check the windows documentation about hardware disk configuration and your hardware reference manuals for additional information". Now, I am trying to do the same thing again but when I rebooted I was asked which operating system I wanted to run:
Windows xp or
Windows xp
which makes me thingk that it has been installed in 2 places. There is a FAT partition W in there that the system doesn't let me format because it says that there are system files in etc, so I formatted and installed windows on partition C. Could this be the problem? Is that because it has to go on partition W? How do I get that formatted?
thanks

This should give you an idea http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ although to be honest I never use that many media queries. As long as you target tablets and phones you should be ok. In terms of widths to use, I am of the opinion that the layout should dictate how many queries and what type of queries you need: in other words, if your site breaks at 940px wide, then use 940 as a trigger point for a media query. DOes it make any sense?

Uhm, I assumed it was usb 2 because it isn't really an old machine. Is there any way I can check at glance?

Thanks, but I have to wait till all the formatting process is finished unfortunately...I hope it won't be long! In fairness, when I started the formatting something odd had happened. The formatting screen came up with a W drive which I think was a FAT partition. I tried to format that but I had a message saying that the partition was corrupted. I didn't realize that wasn't the main partition. Then I eventually I started to format the C partition

Hi all, a friend of mine had some problems with her laptop and she asked me to look at it. I have formatted the hard drive and I am in the process of reinstall windows xp on it - I don't know the specs of the laptop because I dont' have it here with me at the moment, but it is more a decent notebook really. Anyway, I have formatted many computers so far and the whole process takes no longer than a couple of hours. Well, with this, I formatted the hard drive ok but copying the windows files on the machine is taking forever. It has been running for over 30 hours and it is still at 80%. I mean it's not stuck or anything, just terribily slow. It obvious that something's wrong here, and I was wondering if anybody has an idea at all. I think it is probably the hard drive that has some issues. Ah, also, being a notebook I am installing windows from a flash usb, but again, I have done this before and never had any problems or massive slow-downs
thanks

ah ok thanks for clarifying that! Ah, of course, I didn't think about looking in the api!
cheers

Hi all, I wonder if you can help me to understand this. I came across the following code:

@Override
   public String toString()
   {
      return String.format( "hourly employee: %s\n%s: $%,.2f; %s: %,.2f", 
         super.toString(), "hourly wage", getWage(), 
         "hours worked", getHours() );
   } // end method toString

I have some problems with the various colons and semicolons inside the String.format method, here return String.format( "hourly employee: %s\n%s: $%,.2f; %s: %,.2f". What are they? I dont' think they are flags or format specifiers are they? Are they just literals?
I have done a bit of reading about the subject but I haven't found that much on the book I am reading, so I thought I'd ask. Now, the semicolons and colons get printed, but is there a general rule as to what they are, how they work and where they go?
thanks

:-)!

thanks priteas and almostbob. I wasn't aware of the possibility to include media="screen" and media="print" in the css declaration in the html file, hence my issue. I have done a bit of reading following both your posts, and in my case this seems to be the best solution. Thanks for that!

that's odd, I appreciate what the microsoft link says, but I have never been able to get medi querie to work in anything below IE10. Anyway, that's beside the point, because hide and show elements is easy enough, but I need to apply the print only css to a page only when users attempt to print it off. Like I said above, the page has an ordinary css, but when the print button is clicked I somehow need to inject the print css on the page. That I presume should be done with a script? Perhaps targetting the head tag and append the new print only css?

Chaps,
I run into a strange problem today for the first time. Basically I have a web page that users can print using a print button on the page itself,
but what I want is them to be able to print a print-only version of this page. So, I wrote a css that skins down the page a little, removing,
or I should say hiding, unwanted elements. The problem is the functionality: how do I make sure that when the user clicks the print button
it prints off the page with the print only style sheet? Let's see some code. Here is my sample page:

<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="normalCSS.css">
    </head>
    <body>
        <div>
            <a href="#">Print page</a>
        </div>
        <div>
            <!-- all my content goes here-->
        </div>
    </body>
</html>

This page has a normalCSS.css file on it, which is its ordinary css. I have another file called printOnly.css that skins the page down but it is not included in the above code.
So, I need this print only css to be applied to the page everytime somebody press the print button.
Possible solutions:
1)a script that replaces the current css with the printOnly.css when the print button is clicked?
2)a script that adds the css to the page positioning after the normalCSS.css so that whatever is in printOnly will take precedence?

I have looked into the print media query http://www.joshuawinn.com/css-print-media-query/ but I don't see how that could help …

Thanks JorgeM, yes, since I mentioned "only" it was good to know all the options : -)

thanks JorgeM, but I will probably stick to javascript, I don't develop in asp.net so I dont' feel confident with it.
@almostbob, that way I won't be able to add any effect though

fab thanks

Agree, forget about Dreamweaver if you are serious about building websites. About responsive design, depending on how much you know about web development, I would start with a good article of Ethan Marcotte http://alistapart.com/article/fluidgrids. It is easy to understand but it is very comprehensive I think. This http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design also has some useful concepts like media queries, which you have to get familiar with (unless you are already) if you plan to do responsive design. And last but not least, something about images:
http://unstoppablerobotninja.com/entry/fluid-images.
That should be a good start

thanks. @Pilot122x, yes by old videos I meant the ones that were shot at the highest resolution. I must admit I am not vry well versed in resolutions and video/photoediting, but like I said when we lowered the resolution we discovered that the videos play well in any video player. You mentioned a video converter, but is it possible (and advisable) to convert a video from a high res to a lower res?
@rubberman: sorry, I should have said I am a vlc user...and not even vlc can play those, the image freezes up after a few seconds. But, like I said before, if I lower the resolution and shoot another video, it plays absolutely fine in vlc and company
cheers

Chaps, I have a problem. I have some videos recorded with a samsung s3 phone at the following settings:
resolution 1920x1080
Video quality: superfine
format: mp4
Now, the file size range from a minimum of 50MB to a maximum of 100. When I play the recorded videos on the phone, they play ok, but when I download them on the laptop or any other computer they won't play. They start playing but then the image freezes, the audio is fine. After running a few tests, I lowered the resolution of the phone, recorded another video and played it on the computer. This time it played ok. SO the problem seems to be lying with the resolution being too high. Still, I am in trouble now because I can't play the old videos on my computer. How can I sort this out? Is there a software solution that allows me to reduce the resolution of a recorded video or anything else?
thanks

cool, thanks for that. Yes it is to apply some style

HI all, I was wondering if it is legal to have a span tag inside a legend, something like this <legend>This is my<span>legend</span></legend>
Can't quite work out whether legend is a block element or inline
thanks

thanks pritaeas, just wanted to be extra sure!

Hi all, quick question about a website I am about to build. Basically, somewhere on the homepage, presumably quite far down closer to the footer I will have a div with two clickable tabs: when clicked they will show different content but the url of the page needs to stay the same (as opposed to the main proper navigation I supposed). This can be achieved only with javascript right?

thanks for the explanation guys, really useful!

Oh I see, so it ='s because they take the whole width of the container. RIght, so what would be the best way to get this sorted? I mean, can it be sorted at all? the sizes (630px and 150px for the small containers) will have to stay the same unfortunately, the height of the mainWrapper can instead change if needed

sorry I am not sure I understand. What do you mean by "consume the entirety so it returns"?

Chaps, I have run into some strange behaviour never seen it before, and it is really giving me a huge headache. I wonder if anybody can help me to understand why this is happening. Here is the link: http://antobbo.webspace.virginmedia.com/various_tests/floatProblem/test.htm
Look at the squares labelled 1,2,3,4 inside the red div. They are all floated left. Now, when I increase the height of div 2 (you could do that in firebug) you will notice that, as you expect, div 4 will be pushed down. But also div 3 is pushed down!? And I have been wracking my brain for hours today trying to understand why that happens. Needless to say I don't want it to happen, I only want the container just below the one whose height I have increased to be pushed down. Is it something stupid I am doing or have I run into some kind of floating bug?
There are a couple of things I should mentioned. I have tried to achieve the same result with positioning (absolute etc) but the problem is that divs 1 and 2 will contain text and therefore need to grow and shrinks and obviously with absolute positionoing you have to specify a height etc etc, so I would like to stick to
floating divs if it is ok.
So let's look at the relevant code:

<h2>Floating problem</h2>
    <div class="mainWrapper">
        <div class="one"><p>1</p></div>
        <div class="two"><p>2</p></div>
        <div class="three">
            <p>3</p>
        </div>
        <div class="four">
            <p>4</p>
        </div>
    </div>





.mainWrapper{
    background-color:red;
    width:630px;
    height:400px; …

eh eh stbuchok, sorry I missed that...probably my eyes got so puffy for looking at the monitor that I have missed it

iamthwee, unfortunately it is not me taking decisions, so I can't use bootstrap.
webmeat, I will cerainly try that, but as I said I have a feeling that the problem is with the other query and not the one you mentioned

Chaps,
I wonder if anybody can help me with this issue. Basically, I have a simple page that I am trying to make responsive and it all works ok except that on a mobile phone in landscape mode I am experiencing problems. Now, let me say first that I have worked on a few mobile projects before but I don't have a great deal of experience with it, so it might be that I am missing something really elementary here.
So let's look at the code. First, here's a link to the page, so you can replicate the issue:

http://antobbo.webspace.virginmedia.com/various_tests/responsive/template.html

If you look at this site on a mobile phone (I am using a samsung galaxy I android version 4.0.1 custom rom) you will notice that everything looks the way I want, but if you refresh the site while in landscape you will notice that the site is slightly zoomed in, and it shouldn't be because I have the metatag that says user-scalable=no

In terms of media queries I have only used the following:

@media screen and (max-width:984px){
...
}

because the site width is 984px and

@media screen and (max-width:500px){}

for mobile phones.
Like I said mobile in portrait works fine, so the problem has to be with the first query max-width:984px. I have run a series of tests: first to get the exact size of my phone screen size, which is apparently 800px x 480px in landscape. The strange …

after many attempts, it turned out that the problem was this linebackground:url("images/chromeIcon.jpg")no-repeat 32% 0;
A missing space between the url and the no-repeat can make a lot of damage. Thanks everybody for looking at this though!

Hi all, I have spent a few hours on this now, and I have to admit that I have absolutely no idea what is going on. I have a background image that is not showing in IE7 and IE8, other browsers are ok. Here is the link http://antobbo.webspace.virginmedia.com/various_tests/imageProblem/confirmation.html
I am completely baffled.
The code is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>Test</title>  

        <link rel="stylesheet" type="text/css" href="css/style.css" />

    </head>
    <body>

        <div class="wrapper">
            <div id="container">
                <div class="left-column">
                    <h2>confirmation</h2>
                    <a href="#" class="trigger">See this</a>
                    <div class="openedContainer">                        
                        <div class="noCollapse">
                            <div class="left-container">
                                <p><span class="bold">Reference: </span>XXXXX <span class="bold leftSpace">Item: </span>10.00</p>
                            </div>
                            <div class="right-container">
                                <p><span class="">Email PDF invoice</span></p>
                            </div>
                            <div class="left-container">
                                <p><span class="bold">Item:</span> 100.00 with credit card</p>
                            </div>
                            <div class="left-container">
                                <p><span class="bold">Items:</span> 2 apples, 2 pears, 1 banana</p>
                            </div>                                                   
                            <div class="clear"></div>
                        </div>
                        <div class="toCollapse">
                            <div class="left-container">
                                <p><span class="wrappingText">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </span></p>
                            </div>
                            <div class="right-container">
                                <p><span class="pound">Summary</span></p>
                                <p><span>11 11 3452: £21.00</span><span class="leftSpace">credit card</span></p>
                                <p><span>11 11 3452: £21.00</span><span class="leftSpace">credit card</span></p>                              
                            </div>
                            <div class="left-container">
                                <a href="#">Need anything else?</a>
                            </div>

                            <div class="clear"></div>

                        </div>
                        <div class="clear"></div>
                    </div>

                    <div class="openedContainer">                        
                        <div class="noCollapse">
                            <div class="left-container spaceBelow">
                                <h3>Here</h3>
                            </div>
                            <div class="right-container spaceBelow">
                                <h3>There</h3>
                            </div>
                            <div class="left-container">

                                <p class="withImage"><span >Lorem ipsum</span> <span class="leftSpace">dolor sit amet</span>,<span class="leftSpace"> consectetur adipiscing elit. </span><span class="leftSpace">Aliquam rhoncus lectus porttitor </span>lacus dictum viverra. Morbi eget ante vel elit rhoncus au</p>

                            </div>
                            <div class="right-container">
                                <p><span class="bold">Lorem ipsum dolor</span></p>
                            </div>


                            <div class="clear"></div>
                        </div>
                        <div class="toCollapse">
                        </div>
                    </div>

                </div> …

Thanks, I did it in the end, adding this

 display: inline-block;
    height: 48px;
    line-height: 45px;

to the .leftCol span.image.
thanks anyway

Chaps, I have a problem, and I am not sure how to get around it. Basically, I have a background image (it sits in a span) which is roughly 40px x 40px (bigger than the span) and it gets cropped off. How can I display the whole image even if the element is smaller than the image? here is a link that illustrate the problem http://antobbo.webspace.virginmedia.com/various_tests/background/images.html
and here is some code:

<!DOCTYPE html>
<html>
    <head>
        <title>Background image</title>       
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="leftCol">
            <p><span class="image">Here is an icon as background image</span></p>
        </div>
        <div class="rightCol"></div>
    </body>
</html>





.leftCol, .rightCol{
    float:left;
    width:500px;
    height:500px;
}
.leftCol{
    border:1px solid red;
}
.rightCol{
    border:1px solid blue;
}

.leftCol span.image{
    background:url("chromeIcon.jpg") no-repeat 0 50%;
    padding-left:50px;
}

The idea is here is that I won't resize the image, is there a way I can display the whole image, so that it overflows the span? The overflow property doesn't help and same with line-height. I am a it lost.
cheers

Agree with ggamble, but some time ago I had a similar problem (personally I wouldn't use a table on a mobile site unless the client specifically requires you to do so, otherwise I would find a different way to display information), but you can have a look at responsive tables. Mind you though, I doubt this solution is the best thing for accessibility, nonetheless it works really well...http://css-tricks.com/responsive-data-tables/

Hi iamthwee, yes sorry I should have said I have looked at the other options too, but I specifically wanted to use animate() if possible. With the element hidden I got it back with
changing the opacity to "show" which is quite odd because even when the element has display:none; the opacity seems to be 1. This is the script:

$(document).ready(function(){
    //console.log("script running");
    var $paymentBlock = $(".payment-block-grey");
    //console.log("paymentBlock class is " + $paymentBlock.attr("class"));
    console.log("width of hidden is " + $paymentBlock.width() + " opacity of it is " + $paymentBlock.css("opacity"));
    $(".grey-button a").click(function(e){
        e.preventDefault();
        //$paymentBlock.slideDown();
        $paymentBlock.animate({
            "opacity": "show"
        },5000)
    });

});

Is changing the opacity of an element to "show" the right way to make the element visible? I have tried with

$paymentBlock.animate({
            "display": "block"
        },5000)

but it doesn't work. Why? Back to your suggestion iamthwee, if I use fadeIn() can I then somehow chain the animate() method to it?

Chaps, something that occurred to me today. If I have a div with display:hidden; and I want it to unhide it and animate it at the same time with animate(), how do I achieve that? I had a look at the jquery API and it says that animate() unlinke slideDown() etc doesn't unhide the element so it has to be done in a different way. I am aware of course of other methods like show() etc but I wan't to use animate() for some extra zest if you like.
I run a couple of tests to try whether a hidden element still has a width (using .width())and to my surprise it has, so there it goes my attempt to give the element a width in the animation. How should I proceed, any suggestion at all?
thanks

ok thanks guys, so I seem to understand that it needs to be looked at on a case by case, thanks for your inputs
cheers