CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

I would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I'm quite uncertain which approach would be the best. It should work even on older browsers. Any help would be appreciated!

I have a radio button that I would like to be able to enable and disable through jQuery Mobile. Radio button code: <input type="radio" disabled="disabled" value="option1" /> tried: $('input[type="radio"]').removeAttr('disabled'); and $('input[type="radio"]').attr('disabled', ''); Neither of which seem to be able to toggle the button to enabled.

I have a radio button that I would like to be able to enable and disable through jQuery Mobile. Radio button code: <input type="radio" disabled="disabled" value="option1" /> tried: $('input[type="radio"]').removeAttr('disabled'); and $('input[type="radio"]').attr('disabled', ''); Neither of which seem to be able to toggle the button to enabled.

I am trying to create specific CSS for handheld devices, and I feel like I've tried every way possible with no effect. The reason I need to do this is so that handheld devices to not use fancybox but instead open the link in a new tab. To do this in the div there are 2 UL's, each with a class (screen & handheld). I want the handheld ul to be hidden on desktops and the screen ul to be hidden on handhelds which should be working using display: none on each. To get the device specific CSS to work I've tried using seperate css files in the HTML header such as: <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" /> or, within the master.css file: @media only screen and (max-device-width: 640px) { .screen { display: none !important; } } but this does not work

I currently have a banner/header as well as a horizontal navigation menu below this header that I would like to freeze pane/fix, so that any content below this header/nav just scrolls beneath it, always. FYI, need it to work in IE8. I have setup the following skeleton structure of this as follows: <div id="banner-nav"> <div id="banner"> <div id="nav"> </div> </div> </div> <div id="content"> </div> Would appreciate your help on this. If it cannot be done on the above fashion, any other alternatives that would accomplish my requirement, would be great. Thanks.

I'm trying to decipher effects like the one seen on http://www.htmldrive.net/items/demo/71/Dynamic-navigation-menu-with-scrolling-color-glide-followed-with-jQuery but I'm not very familiar with jquery/js (unless the code is all spelled out for me) I haven't been able to find many other examples of this menu effect (I'm probably using the wrong keywords). Can anyone help me figure out how these are generally created? I'd like to do so on my site (though with a thick underline instead of highlight). Thanks! edit- I realize I can just use one of these plugins, but I'd really like to understand what's going on/do my own

I have this code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/> <script src='https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js'/> <link href='https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css' rel='stylesheet' type='text/css'/> <script type='text/javascript'> jQuery(document).ready(function(){ if (document.cookie.indexOf(&#39;visited=flase&#39;) == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = &quot;visited=false;expires=&quot; + expires.toUTCString(); $.colorbox({width:&quot;400px&quot;, inline:true, href:&quot;#mdfb&quot;}); } }); </script> The code is for a Facebook-like box which appears when a use

I have a submit button which has the following CSS: .button{ border:1px solid #015691; background-image:url('http://boundsblazer.com/pkg/pics/ buttons/small-button.png'); color:#ffffff; height:18px; font-size:8pt; font-family:sans-serif, verdana; cursor:pointer; line-height:14px; margin-bottom:-5px; border-bottom-color:#222222; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; behavior: url("http://boundsblazer.com/pkg/plugins/PIE.htc"); } and my JQuery... $(".button").mousedown(function(){ $(this).css('border-bottom-width', '0px'); $(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button-pressed.png\')'); $(this).mouseout(function(){ $(this).css('border-bottom-width', '1px'); $(this).css('background-imag

I'm using php and javascript and what i want to do is to load the different sections of a web page at different time such that first my header and side slider loads up and then my middle content. And also, when user scrolls down then only the images loads up.

I was wondering if there's a way to automatically control orphaned words in an HTML file, possibly by using CSS and/or Javascript (or something else, if anyone has an alternative suggestion). By 'orphaned words', I mean singular words that appear on a new line at the end of a paragraph. For example: "This paragraph ends with an undesirable orphaned word." Instead, it would be preferable to have the paragraph break as follows: "This paragraph no longer ends with an undesirable orphaned word." While I know that I could manually correct this by placing an HTML non-breaking space (&nbsp) between the final two words, I'm wondering if there's a way to automate the process, since manual adjustments like this can quickly become tedious for large blocks of text across multiple files. Incidentally, the CSS2 properties "orphans:" (and "widows:") only apply to entire lines of text, and even then only for the printing of HTM

I'm working on a site where I have input buttons (styled using CSS) that are a part of a form. For example, see below for sample code <input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/> I've just found an issue where if a user clicks on the button, it moves a few pixels below and then expected action takes place intermittently . But intermittent , I mean that sometimes it works (redirects the user to the next page) and sometimes nothing happens. The developer who worked on this previously hasn't documented his code much, so I'm trying to work from scratch here (so excuse the lack of details). Anyway, after testing the code, it appears that the issue lies with how newer browsers are rendering the css and javascript. Here's a snippet of the javascript behind the button's functionality: $("#buttonsavejs").click(function(){ $(&quo

I have a jqgrid on a page and i want to disable that page or make it transparent and show a busy spinning icon above it while the data on the grid refreshes. how to do that???

I have a multiple pages website where I wan't to change some css stuffs. So my index.php?p=page points to various pages but on every page I also want to adjust some css like the color of the currently active menu item(li) etc. What is the best way to achieve this? Should i just make a php var on each page?

I am trying to write some code where a description box pops over an image when I hover over it. I have multiple images on my page which sort of looks like this: <div class="image"> <a href="?page=page1>"><img src="images/1.jpg" width="220" height="220"></a> </div> <div class="description" style="display: none;"> description 1 </div> <div class="image"> <a href="?page=page2>"><img src="images/2.jpg" width="220" height="220"></a> </div> <div class="description" style="display: none;"> description 2 </div> <div class="image"> <a href="?page=page3"><img src="images/3.jpg" width="220" height="220"></a> </div> <div class="description" style="display: none;

I have a navigation made and it has sub-levels, which works fine. However, I now want to add ANOTHER level to a sub-level, so that I can choose Lookup-->Webinar-->By Date The way I have this set up, the extra level is not hidden by default. It is only supposed to show when the word "Webinar" gets hovered over. Can someone help? <div id="menuwrapper"> <ul id="p7menubar"> <li><a href="#" class="trigger">Lookup</a> <ul> <li><a href="/ProductLookup.aspx">Product</a></li> <li><a href="/CategoryLookup.aspx">Category</a></li> <li><a href="#" class="subtrigger">Webinar</a> <ul> <li><a href="/WebinarLookupByDate.aspx">By Date</a></li> <li><a href="/WebinarLookupByName.aspx"&g

I'm looking for a way to display a 5 day forecast of the weather without having to pay $500 a month to AccuWeather. I would like it to look nice like this: http://www.accuweather.com/en/us/los-angeles-ca/90012/daily-weather-forecast/347625 Thanks for any help!

Please take a look this fiddle How to make the background image clickable? When click "Take the survey" will go to a new page. <div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;"> By default, the background-image property repeats an image both horizontally and vertically. </div> Javascript or CSS are all preferred. Edit: I don't want to use image float to right corner.

First, I'm pretty beginner of jQuery or AJAX. I've got around 50+ links on a web page and each link has a div#popup which contain a table and a img. It means around 50 pictures are loading when the page loads and it slower the site quite a bit. So I would like to know if there a way to to load the picture only when mouseover the link?\ Here is the code and script I'm using. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery Popup Div on hover Test</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { var moveLeft = 20; var moveDown = 10; $('a#trigger').hover(function(e) { $('div#pop-up').show(); }, function() { $('div#pop-up').hide(); }); $('a#t

The table on this page is sorted by the tablesorter plugin . The candy-striping is not re-applied after sorting, so the shaded and unshaded rows appear in the wrong sequence after a sort is performed. Click on the Name column to see an example of this. Is there a way to redo the striping after a sort?