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

Posts

Showing posts with the label css

JavaScript : Good tool to "minify" jQuery based js files

We are using jQuery in our project. We have numerous custom javascript files in our web-app that have UDFs utilizing the jQuery features. We need to reduce the size (as a part of performance improvement activities) and I am looking for a reliable 'minifier' for these files (it would be great if the same tool could minify the CSS files too) We tried JSLint and JSMin - but JSLint does not complete and throws many exceptions as soon as it encounters jQuery code. Regards, - Ashish Source: Tips4all

Deliverables for PHP web designer

I'm in the design phase of a medium-sized PHP web application (not a static website). Since I'm a programmer with the creativity of an eggplant I'd like to contract with a freelancer to design the look and feel of the application. What deliverable should I ask for from the designer? HTML files? PHP files? How do I apply the look and feel from the designer to my app? Source: Tips4all

Android Webkit: Absolutely positioned elements don"t respect z-index

Nasty little bug, this one. As illustrated in Android ticket 6721 , the Android browser seems to not respect z-index when absolutely positioned elements are laid over the top of <a> or <input> tags. I am desperate for any sort of workaround. Has anybody conquered this one before? Thanks in advance! Source: Tips4all

How can I erase all inline styles with javascript and leave only the styles specified in the css style sheet?

If I have the following in my html: <div style="height:300px; width:300px; background-color:#ffffff;"></div> And this in my css style sheet: div { width:100px; height:100px; background-color:#000000; } Is there any way, with javascript/jquery, to remove all of the inline styles and leave only the styles specified by the css style sheet? Source: Tips4all

Is $(document).ready() also CSS ready?

I've got a script executing on $(document).ready() that's supposed to vertically align block element in my layout. 90% of the time, it works without issue. However, for that extra 10% one of two things happens: There's an obvious lag in the time it takes to do the centering, and the block elements jump into position. This could simply be performance related - as the page size is often large and there is a fair amount of javascript that is executing at once. The centering will completely mess up, and the block element will either pushed down too far or not far enough. It appears as if it tried to calculate the height, but was getting improper measurements. Is there any reason why executing a script on DOM-ready would not have all the correct CSS values injected into the DOM yet? (all CSS is in the <head> via a <link> ). Also, here's the script that's causing the issue (yes, it's been taken straight from here

Disable grey border on anchor (<a>) elements on focus

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property " outline:none; " works for Firefox, but how can I do it in IE. Preferably using CSS expressions or jquery. I'm not worried about accessibility BTW. Based on your suggestions I found these to be the best solutions... The jquery(for IE browsers): $('a').focus(function(){ $(this).blur(); }); Another jquery option(for IE browsers only): $('a').focus(function(){ $(this).attr("hideFocus", "hidefocus"); }); The CSS(For all other browsers that force an outline): a{ outline: none; } Note: Some browsers such as Google Chrome don't force an outline on focus. Source: Tips4all

How can I make the Facebook Like button"s width automatically resize?

I'm implementing the Facebook Like Button , but I'm running into some trouble with the width. I'm using the JavaScript SDK implementation, not the direct iframe. According to the documentation, the default width is 450 . That's fine, and I understand that the width can be changed by way of the width attribute on the <fb:like> tag. However, my problem is that I really cannot specify a fixed width. Due to the nature of the button, the width is not constant in all states. For example, if no one has liked the page yet it displays "Be the first of your friends to like this"; if someone has, it displays "XXX people like this. Be the first of your friends"; and still if you have liked it, it displays "You like this" or "You and XXX people like this." In other words, there are many states of the button, none of which share a constant width. This wouldn't be much of a problem if it weren't for the fact that I want

iphone webkit css animations cause flicker

This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/ After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see that when you let go they snap into place. Just as that snap happens, there's a flicker that occurs. The only webkit animations I'm using are: '-webkit-transition': 'none' '-webkit-transition': 'all 0.2s ease-out' '-webkit-transform': 'translate(XXpx, XXpx)' I choose either the first or second transition based on whether or not I want it to animate, and the transform is the only way I move things around. The biggest issue though is when you click "Match items", then click "Play again". You'll see as the guns animate in, the entire background of the accessories/purses goes white. Can someone please radiate me with some insight asto why this is happening??

How to target iPhone 3GS AND iPhone 4 in one @media query

I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well. I have established that the best method is to use @media queries from the CSS3 spec, As such these are my media queries at the minute: @media screen and (max-width: 1000px) { ... } Above is for small desktop and laptop screens. @media screen and (max-width: 700px) { ... } Above is for the iPad and VERY small desktop/laptop screens. @media screen and (max-device-width: 480px) { ... } Above is for iPhone 3GS- and mobile devices in general. However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit): @media screen and (-webkit-min-device-pixel-ratio: 2) { ... } N

What does -webkit-min-device-pixel-ratio: 2 stand for?

@media only screen and (max-device-width:480px), only screen and (-webkit-min-device-pixel-ratio: 2) { /*iphone css*/ } max-device width makes sense but pixel ratio doesn't make any sense to me. thanks.

How do I properly use position: absolute?

Sorry for the newbie question, but I can't seem to work around this issue just yet. I have a website with dynamic content all over. When you go to the page of an article, it pulls the content from the database etc. If the user is logged in and is an admin on of the website, I am displaying an "Edit article" link in the top right corner. The only problem is the position of that "Edit article" div . On different screen resolutions, it moves around, as the it's set with a position:absolute , top:x px , left:y px . I am open to any suggestion (Javascript, jQuery most welcome, easy peasy CSS would be best if possible).

Set element to Hidden when clicked

I'm putting together this basic script for a site: http://jsfiddle.net/mcgarriers/rVPnu/2/ It works great when I select the various numbers (it shows the relevant divs) but when I go back to click "Select" it still displays the <div> s. I'd like it if the user clicks "Select" that mySpecialElements is hidden again . Can someone show me how to achieve this? Many thanks for any pointers.

How do I remove multiple href links via the ID with jquery?

I'm having issues removing several of my href links that all have the same ID. Here is my code snippet: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); $.getJSON("../ajax_blocked.php?op=delete&id="+id, function(data) { if (data) { $("#delblk_"+id).each(function() { $(this).remove(); }); } }); My HTML looks like this: <a href="sent.php" id="delblk_7" class="delblk" ><span class="label label-important">Unblock</span></a> <a href="sent.php" id="delblk_7" class="delblk" ><span class="label label-important">Unblock</span></a> <a href="sent.php" id="delblk_8" class="delblk" ><span class="label label-important">Unblock</span></a>

format cell in flexigrid to show value [closed]

Possible Duplicate: How can I format numbers as money in JavaScript? Does anybody know how I can format cell in flexigrid to show value in currency for example euro with separator "," and for cents "." I import value with JSON but don't know how to change look of that number to be like amount to pay. Thx...

Using OO PHP in CSS

tl;dr - I'd like to know if it is possible to pass an object into a PHP file with CSS headers, such that I can use this object to manipulate various CSS attributes. What I'm attempting to do, is allow my PHP/CSS file to interact with the other objects/php files in the webpage, e.g. menu item objects. My ultimate goal is to use PHP in the CSS file to count the number of menu items, and apply the appropriate width value in order to space them out evenly on the page. I use a very simple color based example below to demonstrate my understanding so far... I understand that for basic usage of PHP in a CSS file, one can do something like: <?php header("Content-type: text/css"); $dkgreen = '#008400'; body { background:<?=$white?>; } ?> I also understand that OO PHP can be used to achieve a similar thing, e.g.: class css { function __construct($args=array()) { foreach($args as $key => $field) { $this->{"$key&qu

How to find out whether an element is in a hidden iframe

Using jQuery, one can easily find out whether a particular element is visible using $(element).is(':visible') While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe. If the element has any parent within its document with display:none; , it returns false. If the whole document is included in an iframe which has display:none , it returns true. Is it possible to somehow detect this in another way ?

How to find out whether an element is in a hidden iframe

How to do this in jquery style

I have this code: <p><label for="mobtel">Enter mobile no.:</label><br /> <input id="mobtel" type="text" name="mobtel"/></p> I hide it using jquery with this: $("label[for=mobtel],#mobtel").hide(); And now I want now is to display a new label and new input that will look like this: <p><label for="mobtel">Enter verification no.:</label><br /> <input id="verification_no" type="text" name="verification_no"/></p> How can I do this in jquery style?

How to do this in jquery style

User draw shapes on top of an image

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!