I like the look of the link dialog here. It darkens the screen and is probably modal (although I haven't tested that I just assume it is). What's a quick and easy way of darkening the screen like that witha jQuery UI Dialog?
The functionality you're talking about is provided by the WYSIWYM Markdown Editor
To do it with jQuery UI's dialog, try this:
$("#something").dialog({ modal: true; });
<div id="something" title="modal dialog">
<p>Add your stuff here.</p>
</div>
It's not exactly the same by default, but I think it's even prettier. ;)
http://ui.jquery.com/demos/dialog/#modal
One way to do it is to have a div at z-order > 1 which covers the whole screen at less than 100% opacity
HTML:
<div id="cover> </div>
CSS:
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: none;
background-color: #000000;
opacity: .7;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7);
}
Then you can show the cover when you show your dialog, which needs to be at a yet higher z-index and remove the cover at the same time as your dialog:
Open:
$("#cover").show();
$("#fileupload").show( "slow" );
Close:
$("#fileupload").fadeOut( "slow" );
$("#cover").hide();
Related
So I have this carousel from http://kenwheeler.github.io/slick/. I decided with my carousel that once you click the image-a video appears. Well I want this video to load into a Modal Image-with a closeout function. The first line of code for div id....is the image onced clicked the video appears. The rest below it I'll just copy and paste the first part. (Repeat of the same image/video four times-until I decide to switch things out)
<section class="center slider">
<div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
</section>
I have the JS and CSS all working fine I just can't implant a function where you click the image the "image(video)" will open in a new window. Sorry about my wording. I am beginner and learning as I go. I know what I want it to do but can't figure out how.
Please let me know if I need to provide anything further.
I think the term you're looking for that might help you in Googling would be that you want your video to open in a lightbox.
Answering specifically how to do this in your particular circumstance is too broad for this site, even if you give us more code to look at. But generally the way you can accomplish this is to use JavaScript to toggle a class on one or more elements when your slideshow images are clicked, and adding that class would trigger the video to show up, while clicking the exit button would remove the class so things go back to their original appearance.
Here is a really basic example, but you can basically take this concept and make it as simple or complicated as you want. You could, for example, toggle a class on the html or body tag of your page and then adjust the CSS of a bunch of stuff on the page based on whether that class is applied.
If you're using jQuery, there are plugins designed exactly for this purpose that will automatically give you a ton of settings to do things like automatically size and perfectly center your lightbox in the viewport and take care of mobile functionality and whatnot. Fancybox and Colorbox are a couple examples.
var lightboxImg = document.getElementsByTagName('img')[0];
lightboxImg.addEventListener('click', function(){
this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
lightboxImg.parentNode.classList.toggle('lightbox');
});
/* relevant stuff */
#iframe {
display: none;
position: absolute;
top: -100px;
left: -100px;
}
#exit {
position: absolute;
top: 10px;
right: -290px;
padding: 5px;
background-color: white;
}
section div.lightbox #iframe {
display: block;
}
img:hover, #exit:hover {
cursor: pointer;
}
/* just for display purposes */
html, body {
height: 100%;
}
section {
width: 400px;
height: 300px;
background-color: gold;
position: relative;
left: calc(50% - 200px);
top: calc(50% - 150px);
}
section div {
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 200px;
}
<section class="center slider">
<div>
<img src="http://placehold.it/300x200?text=click%20me">
<div id="iframe"><img src="http://placehold.it/600x400?text=your%20iframe"><span id="exit">X</span></div>
</div>
</section>
The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.
The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals
Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.
No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.
Mozilla's docs explain the limits and functionality well.
If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.
You could use jqueryUI as suggested. An example of controlling the duration on the show property:
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });
Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.
If you want all the tooltips of your page to show immediately at hover, just use this:
$(document).tooltip({show: null});
Note that this applies to all elements that have a 'title' attribute.
You can modify the selector to affect only a class, and set custom speed or effect:
$('.yourClass').tooltip({show: {effect:"none", delay:0}});
Unfortunately, there is no way to do this yet,
so I am using the following methods to help. (No dependencies required)
<style>
[title] {
position: relative;
}
[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}
[title]:hover:after {
opacity: 1;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>
If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.
<style>
[data-tooltip] {
position: relative;
}
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}
[data-tooltip]:hover:after {
opacity: 1;
}
div[data-tooltip]:after {
left: 5px!important;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>
below link may help you too.
fade in and out on simple css tooltip
It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.
TippyJS has a billion customization options.
https://atomiks.github.io/tippyjs
https://github.com/atomiks/tippyjs
This is the HTML code:
<div id="dialog" title="lala" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
This is the JavaScript
$bb('#addTopicButton').live('click',function() {
$bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false });
});
Why modal is not working? When it is opened I still can click other links on the page and do things in the background.
Thanks a lot
UPDATE:
It seems to be working though. Only the links are active in the background and working. How can I disable everything, including links?
You probably just need to include the jQuery UI CSS to your page.
Google has this on its CDN here:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
The modal option on the dialog creates an overlay under your dialog but over the rest of the content. This overlay needs the jQuery UI CSS to function correctly.
Just had the same issue. I needed the CSS, but I didn't want all of it. So I just copy pasted this part in my own CSS code:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa;
opacity: 0.3;
}
Adding only .ui-widget-overlay to your css will make the overlay appear on the complete top, and even the dialog will be unusable.
Therefore, the .ui-front class too should be added:
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-front {
z-index: 100;
}
I had the same problem I solved it in nearly the same way I went into the 'jquery-ui.theme.css' file searched for '.ui-widget-overlay' and changed the block from:
.ui-widget-overlay {
background: #A9BCD0;
opacity: 1;
filter: Alpha(Opacity=100); /* support: IE8 */
}
to
.ui-widget-overlay {
background: #A9BCD0;
opacity: .3;
filter: Alpha(Opacity=30); /* support: IE8 */
}