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.
Related
I want to create an element where it performs a show/hide functionality of text when a user clicks on a button. I've found a helpful page through this link: http://www.meadinkent.co.uk/expand_sections.htm
The only issue I have is that it uses javascript. As I want to place this into Sharepoint, what Sharepoint does is remove the <script> everytime it's submitted, so javascript I'm assuming can't be used.
I want to know if there is a way to perform the same functionality as displayed in the page but with HTML only?
Thank you
You can add js by using Embed Code web part. Just go "Insert tab" and click "Embed Code". Then edit this and you will able to use js, css, html. So, you can use your helpful link.
Embed code webpart
You can use CSS to show/hide text. You can vist the following links, which may help you.
1) https://alexcican.com/post/hide-and-show-div/
2) How to show/hide div on click with stricly HTML/CSS
I have been working with html and css for about 6 months, and a very very little javascript.
I recently saw this site here: http://daegonner.com and i noticed if you click "vote" it opens up this window box, but on the same website.
How is this made?
There are some thing you need to do to have that look.
Firstly you need to create that small windows using css and html, by the way it's called modal (like this one http://getbootstrap.com/javascript/#modals)
Secondly, you need to study javascript onclick events (you can refer here http://www.w3schools.com/jsref/dom_obj_event.asp), which help the small window display when you click to vote link.
Finally, the content inside that box is up to you. The page which you gave embed the content from another page through .
Look for CSS Popup or Lightbox on Google, you will finde something helpfull
You will have to include the jQuery library within the <head> tag:
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
And then download, include and use some of these plugins or whatever else you find.
http://dimsemenov.com/plugins/magnific-popup/ (recommend - very good and easy to use)
http://www.jacklmoore.com/colorbox/
I need to create tabs on the webpage using html, and on click of each tab, need to load different content on the same page. Do let me know how to go about this, or any useful links that might help me.
Thanks,
Geetha
This can be done with jQuery and jQuery UI.
Here you can find some information about it. http://www.stilbuero.de/jquery/tabs_3/
Dojo (javascript framework) has a TabContainer. It's easy to implement, but depends on the content and how do you want to present it to the user.
You can start by looking here: Dojo TabContainer info
There's an example on that site which lets you see the html and javascript required to build a tabbed container.
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
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).