reset password
Author Message
sbaral2
Posts: 11
Posted 15:34 Dec 07, 2015 |

In the practice final instruction it says:

showSulu(): Shows a div with a pic of Sulu

What is "div with a pic" mean here? 

Thanks.

 

4542elgh
Posts: 71
Posted 15:38 Dec 07, 2015 |
you have a img tag for sulu use div as a container for that img tag (i include a pic since i use mobile and cant type html code in the box)
Attachments:
Last edited by 4542elgh at 15:42 Dec 07, 2015.
sbaral2
Posts: 11
Posted 15:53 Dec 07, 2015 |

Thanks.

And also how pictures are suppose to display on the screen. I'm confused as it says:

1. all of them can be visible at the same time  AND

2. they become visible when the corresponding button is pressed

thanks.

4542elgh
Posts: 71
Posted 15:56 Dec 07, 2015 |
line them up with css, just dont make them pile on top of each other2. they must all be hidden at first and display when clicked
sbaral2
Posts: 11
Posted 19:30 Dec 07, 2015 |

Thank you so much for your help.

but I'm still confused on the part where it says all the images can be visible at the same and again on the later part it says they should be visible only when the corresponding button is clicked. So, what is the point of making several button if all the images are visible at once.

Thanks in advance.

4542elgh
Posts: 71
Posted 20:22 Dec 07, 2015 |
just to show you a before and after might help and i cant attach 2 img at once ... great... so this is the after
Attachments:
4542elgh
Posts: 71
Posted 20:23 Dec 07, 2015 |
this is before click
Attachments:
mramos59
Posts: 5
Posted 08:59 Dec 08, 2015 |

how do you get a button to display an image?

4542elgh
Posts: 71
Posted 11:54 Dec 08, 2015 |
go to the lecture notes #16 and read them over again
mramos59
Posts: 5
Posted 15:43 Dec 08, 2015 |

I am confused on which widget to use, for some reason I can't find a button that onced clicked the image appears. For some reason I'm making a button with the image already appearing in the button, how do I fix that?

4542elgh
Posts: 71
Posted 16:57 Dec 08, 2015 |

so first you need the jquery (core) edition NOT THE UI edition (at least it work for me :D) on chapter 16 slide 9 you need $(document).ready(function _______) where the underscore is the name of your function ex:showSulu()  next line you have #selector this should be the button with ID sulu. and widgetmethod should be .click since you want to click on that button for an event to happen (.click also known as an event handler) after .click you want to specify which function you want to initiate, in this case you want to start up your function showSulu(). last line option settings, you want to show the image so first make a div with img tag in main of your html, assign an id to it (mine is sulu-img) then just use $("YOUR IMG ID").show() so when you click on that button it will go through jquery and run the script $("#sulu-img").show() to show your img. if your image is not hidden at first, use display:none to hide your img when load :D HOPE IT HELP 

mramos59
Posts: 5
Posted 18:29 Dec 08, 2015 |

$(document).ready(function showSulu(){ 
    $("#Sulu").click (showSulu)({
        
        })
    });

 

i dont know if i am doing this right, or if its because my jquery isnt linked correctly  

4542elgh
Posts: 71
Posted 18:45 Dec 08, 2015 |

missing a couple of things, after click you should call your original function .click(function showSulu) and after that in the braces {} where is your .show method? if you click on button nothing will show because you are not using .show method :D

sbaral2
Posts: 11
Posted 20:17 Dec 08, 2015 |

$(document).ready(function(){

        $("#sulu").hide();

        $("#sulubtn").click(function(){

            $("#sulu").show();

        });

     });

I tried to this way, it is woking fine but I don't know if I'm on the right track. I didn't use showSulu() or any function, instead I used ID selector to call the div element.

mramos59
Posts: 5
Posted 20:17 Dec 08, 2015 |

thanks for the help, i got it! 

hahah now my other question is did you use the functions "makeDescriptionAppear" to "showText" or left it as the original function he asked for? and the samething for "magnifytext" to "growText"? because i cannot find any of the functions he asked to use.  

4542elgh
Posts: 71
Posted 20:59 Dec 08, 2015 |
sbaral2 wrote:

$(document).ready(function(){

        $("#sulu").hide();

        $("#sulubtn").click(function(){

            $("#sulu").show();

        });

     });

I tried to this way, it is woking fine but I don't know if I'm on the right track. I didn't use showSulu() or any function, instead I used ID selector to call the div element.

so your "function()" change it to "function showSulu()" but it wont affect functionality, btw your .hide will take more time to load since you are hiding each #sulu , #uhura,#scotty,  and click show them, make a css property call img{display:none;} it will hide all img at load, which will save 4 lines of code and it makes load quicker

Last edited by 4542elgh at 21:06 Dec 08, 2015.
4542elgh
Posts: 71
Posted 21:02 Dec 08, 2015 |
mramos59 wrote:

thanks for the help, i got it! 

hahah now my other question is did you use the functions "makeDescriptionAppear" to "showText" or left it as the original function he asked for? and the samething for "magnifytext" to "growText"? because i cannot find any of the functions he asked to use.  

first show text is the same as showing pictures, just make paragraph inside div, magnify just search on google how to modify css using jquery (modify font-size) btw assign a default font-size to your text if not jquery dont know what property in css to modify, and assign that function to a button to enlarge text. btw if your elements are not in the right place just use css to change them.

Last edited by 4542elgh at 21:08 Dec 08, 2015.
chan9
Posts: 7
Posted 23:10 Dec 08, 2015 |

how were you able to get the text to magnify? is there like another .js file we have to include for it?

4542elgh
Posts: 71
Posted 23:41 Dec 08, 2015 |

when click on magnify button, just make the text larger (use jquery to modify css font-size for example from 2em to 4em)

for me i use $("YOUR PARAGRAPH ID").css("font-size","WHATEVER YOUR NEW FONT SIZE IS"); just replace the .show with this .css to modify your css for your paragraph instead of showing a picture (CAPS are the values you have to input, dont change lower case )

this code just means you want to select your paragraph, and inside css i want to change my font size, to whatever size you set it to.

Last edited by 4542elgh at 23:46 Dec 08, 2015.
chan9
Posts: 7
Posted 00:25 Dec 09, 2015 |

ah thanks! i overthinked it and thought we needed to use a magnifying glass =P

4542elgh
Posts: 71
Posted 00:33 Dec 09, 2015 |

:D good luck on your final XD