In my html select element I would like to show a black arrow and no background.
How can I do it?
You can use a plugin for jQuery, I actually contributed to such a jQuery plugin and you can find the code on github.
The plugin allows you to cusomize the look and feel of the select boxes in your application, not just the arrow but the entire behavior can be customized.
Here's a link to the source code on github (forked)
http://github.com/KensoDev/Stylish-Select
This was tested in IE6,7,8 FF Chrome...
One way would be to use a background image for the select. However, it's not well supported. Personally, I wouldn't use a select for this.
See this for more info: http://doctype.com/styling-select-elements-backgrounds-etc
Here's an alternative method which may work: http://pennypacker.net/articles/css_tricks_select_menu
Related
I'm a web developer, and I can see from Chrome DevTools that Chrome is loading an italic version of one of my fonts on every page. However, I have not intentionally used italics. I cannot see any font on the page that uses italics. I'd like to find the HTML element that is triggering that font load in order to eliminate it from my template. How can I do that?
Perhaps a javascript or jQuery snippet that goes through the DOM to look at the font-style of every element?
You can try to look inside network tab of the google chrome dev tools, click on fonts and reload the page. You will then see all loaded fonts. In the column "Initiators" you can see who was calling that font. Sometimes plugins are loading their list of fonts, and don't use it at all. That can help you maybe.
If you want to glance over which fonts you are using, you can install this chrome plugin https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
For more information, please provide a link for that website.
I think you were looking for:
[...document.querySelectorAll('*')]
.filter(e=>getComputedStyle(e).fontStyle === 'italic')
Pasting this snippet in the Developer Console will give you a list. If you expand the list, and click on individual elements, they will get selected in the Elements inspector. From there, you will also be able to tell which CSS file is giving that font style.
This will also work for any other CSS property, if you update the code snippet.
I have a problem to create command in HTML. What I want is to by click on any element in my table crate a new page where I will show details about that element. Thanks in advance.
From what I can tell, I think what you are looking for is called context menu.
Here is an example of what I am talking about:
http://www.w3schools.com/tags/att_global_contextmenu.asp
In HTML, it seems to have only limited browser support, only firefox from the looks of it.
If you choose to program it with jquery, it seems to have more browser support. Here is a link:
http://medialize.github.io/jQuery-contextMenu/demo.html
http://jsfiddle.net/amosrivera/AYWku/
When ever I try to implement this particular JS Fiddle into dreamweaver, the slide function on the button doesn't work at all. I have put the 'script' etc around the javascript code in the HTML document but still no avail. Any pointers with using JS fiddle?
Use Chrome to test and press F12 to see the console. If it says '$ is not a function' or so, you propably haven't got the jQuery library included. See here (http://docs.jquery.com/Main_Page) how to do it.
Alternatively you can use the plugin 'Firebug' in Firefox
I want to achieve a blur-page effect as an action from a pop up dialog box. How can I do this in HTML and CSS?
Thickbox
http://jquery.com/demo/thickbox/
Fontbox
http://www.mehdiplugins.com/misc/frontbox.htm
FancyBox
http://fancybox.net/
FancyZoom
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html
SlimBox
http://www.digitalia.be/software/slimbox
Shadowbox
http://www.shadowbox-js.com/
I'm not sure about blurring, but Lightbox might do the trick for you.
Lightbox, or the more technical term a "Modal Popup"
if you're using ASP.NET you can use the ModalPopupExtender withinthe AjaxToolKit
There's also BlockUI plugin for the jQuery framework.
Check out the demos on the following site:
http://malsup.com/jquery/block/#demos
To use the plugin, you'll need to include the jQuery framework code. This is dead simple. You can download the jQuery code for free, and include it on your site from
http://www.jquery.com
With this and a lot of solutions given, you may need a that is hidden initally. The div becomes the content of the popup.
I looking to hack something like this:
An example >> Just click on "Start PicLens Lite Slideshow PicLens".
Did you see how the swf/flash loads on top of the normal page?
Im looking to do that :-D
If there is some code out there the better otherwise any tips or hits are welcome.
Thanks lots.
You can look at javascript tools like Shadowbox that can load any types of elements into a box above the site.
You are looking for the lightbox effect. Just set your content to your flash object and use a lightbox sans borders.
If you are using a framework such as Mootools or jQuery I'd suggest a lightbox clone that uses them (e.g. Milkbox or MediaBox Advanced for for Mootools).