So I'm trying to use bPopup as a modal window, but I can't see to get the actual modal window to pop up. I followed the instructions on the documentation (see http://dinbror.dk/bpopup/), but I can't seem to get it appear. Am I missing something?
<html>
<script type = "text/javascript" src = "jquery-1.11.3.min.js"></script>
<script type = "text/javascript" src = "jquery.bpopup.min.js"></script>
<p> Some text </p>
<div style="display:none" id='popup'>
Why is there no modal body???
</div>
<script type = "text/javascript">
$(document).ready(
function(){
$('p').click(function(){
$('#popup').bPopup();
})
})
</script>
</html>
The resulting script looks like this:
After clicking, the result is this:
However, on the documentation, the modal is as follows:
I'm really not sure what I'm missing. I'm probably just blind to something really obvious, any ideas?
Have you read this?
What is bPopup? bPopup is a lightweight jQuery modal popup plugin
(only 1.49KB gzipped). It doesn't create or style your popup but
provides you with all the logic like centering, modal overlay, events
and more. It gives you a lot of opportunities to customize so it will
fit your needs.
So you need to write your own styles for the modal window.
Do not give inline style style="display:none". Inline style will have highest priority and hence bpopup does not/cannot change that property.
Style it in css instead like this
#popup {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
$(document).ready(function() {
$('p').click(function() {
$('#popup').bPopup();
});
});
#popup {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.bClose {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<p>Some text</p>
<div id='popup'>Why is there no modal body???
<span class="bClose">x</span>
</div>
Related
I have the following jQuery, CSS and HTML lines:
$("#button").click(function(){
$("#main").data("ot", "test");
});
#main {
display: inline-block;
background-color: red;
padding: 4px;
width: 230px;
text-align: center;
}
#button {
display: inline-block;
padding: 4px;
background-color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" data-ot="tooltip content" data-ot-delay="0">Div Content (Tooltip Trigger)</div>
<div id="button">Change data-ot to test</div>
OBS: The HTML attribute data-ot is where the tooltip gets the content from...
What I've been trying to do is change the attribute data-ot from it's initial to "test", as shown in the jQuery lines at the snippet.
I even tried using $('#main').attr('data-ot', 'test'); and when I inspect the element in the page it seems to have changed, but the tooltip doesn't recognize the change. During my searches I read that data() and attr() shouldn't be used together for the same porpoise because there might be some conflicts, so I guess that explains why...
I'm really lost on this, any ideas?
As per the plugin documentation you can set or change the attrbutes dynamically.
You can add this code:
var myOpentip = new Opentip($("#main"));
myOpentip.setContent("First Content");
$("#button").click(function() {
myOpentip.setContent("New content");
});
Also, you need to remove data-ot attribute from HTML.
JSFIddle: https://jsfiddle.net/kalimahapps/gu8tu2ev/1/
tooltip value is set when document is built.so if you change it later it will not change the value.
My HTML Code is :
<!DOCTYPE html>
<html>
<head>
<title>Furry Friends Campaign</title>
<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#clickMe").click(function()
{
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
</body>
</html>
The accompanying CSS looks like:
#clickMe {
background: #D8B36E;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe {
background: #D8B36E;
padding: 20px;
width: 205px;
display: none;
border: 2px solid #000;
}
The slideToggle works perfectly, but for some reason, the image doesn't fade in. I've tried setting the duration to longer periods, but that yields the same results. Can someone point out what's wrong with this code? I'm using the latest version of Chrome.
UPDATE: I tried running the example code of the book I was using, which uses jquery-1.6.2.min.js and using that version of jQuery, the code works perfectly. Is this some error on jQuery's part? Or is the new way that things will be done now?
Since jQuery 1.8, fadeIn no longer initially hides the image, so trying to fade in an image which is visible or doesn't have display set to none won't lead to anything.
To fade in, you should hide it first. Initially it's not hidden, since children don't inherit display CSS property, and you have set it to none only on #picframe, the parent of img. Just add $("img").hide(); on ready. This will make it work.
Since it looks like you need to fade it in / out with each click, you could do the following instead of $("img").fadeIn(1000):
if($("img").is(":hidden")) $("img").fadeIn(1000);
else $("img").fadeOut(1000);
Demo below.
#clickMe {
background: #D8B36E;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe {
background: #D8B36E;
padding: 20px;
width: 205px;
display: none;
border: 2px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//$("img").hide();
$("#clickMe").click(function() {
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
Somehow, img didn't inherit the display:none in #picframe div. Here's the fix: https://jsfiddle.net/69rLha7e/1/
There is a "timing" consideration while playing with multiple animations a time.
In this CodePen, I used diferent timing for fadeIn, fadeOut and toggleSlide.
And you have to check the display state in order to decide to fade in or out.
$(document).ready(function(){
$("#clickMe").click(function(){
console.log( $("img").css("display") ) ;
if( $("img").css("display")=="inline" ){
$("img").fadeOut(400);
}else{
$("img").fadeIn(800);
}
$("#picframe").slideToggle(400);
});
});
I need some help!
I'm doing website, and i'm having a problem with a thing. I have a <h1> and a image next to it, that image is a question mark. And i want that when i mouse hover that question mark it appears the div that i made with the information... i saw lots of topics answered in that forum but none of them is working, pls help me!
<html>
<body>
<h1>branch<img id="help" src="Questionmark.png"></img></h1>
<div id="information">Branch is...</div>
<script>
var e = document.getElementById('help');
e.onmouseover = function() {
document.getElementById('information').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('information').style.display = 'none';
}
</script>
</body>
</html>
Pls tell me what to do, maybe there is a easy way... i tried css but also didn't work...
I suggest to go with css.
If you are doing layout, use CSS, if you are setting the look and feel
use CSS, if your doing animation use CSS3
If you attach event handlers or reacting to user input use JavaScript.
Note that people use JavaScript instead of CSS for browser support.
There are other solutions like emulating CSS features using
javascript.
source
css
#information{
display:none;
}
h1:hover + #information{
display:block;
}
fiddle
If you want simple tooltip kind of thing, then you can use this code
<h1>
branch<img id="help" src="Questionmark.png"></img>
<div id="information">Branch is...</div>
</h1>
h1{
position: relative;
}
h1 img{
cursor: pointer;
}
#information{
display: none;
position: absolute;
left: 50px;
width: 100px;
height: 50px;
font-size: 14px;
background: red;
}
h1 img:hover + #information{
display: block;
}
Check this link http://jsfiddle.net/amoljawale/G83WB/2/
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.
I'm using Telerik Radeditor which is rich text area and the editor content is an iframe, something like below:
<iframe frameborder="0"
src="javascript:'<html></html>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;"
title="hello world"
id="contentIframe"></iframe>
My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.
As you can see I put "title" attribute but it is not showing up.
To mimic the tooltip behavior I tried placing overlay div and title which worked but then I lost mouse control because of the overlay div.
I also desperately tried putting title in the iframe body but then I had to click inside of iframe to make it happen which is not the solution.
var iframe_html = $(wrapper).find("iframe").contents().find("html");
$(iframe_html).prop("title", "hello my tooltip 1");
var iframe = $(wrapper).find('iframe');
$(iframe).prop("title", "hello my tooltip 2");
var iframebody = $(iframe).contents().find('body');
$(iframebody).prop("title", "hello my tooltip 3");
I'm using jQuery UI 1.8.16 which does not come with Tooltip capability thus that cannot be an option..
Could anyone help me figure how to show the tooltip?
You are able to assign a title to the iframe but you wont be able to see it in the iframe.. Change the frameborder to "2" and move your cursor to it.. there you go..Title appears...
To see the title on iframe you must set the title of iframe content and not the iframe itself..
just like i've done below..
<iframe frameborder="0"
src="javascript:'<div id=\'hey\' title=\'Hello World\'>Helllo World</div>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;"
title="hello world"
id="contentIframe">
</iframe>
Alternatively..
using jQuery
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
This is a fiddle for your reference..
I just added an iframe to the div in the w3 schools tooltip tutorial (TryIt editor here) and it worked perfectly. To my surprise.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #994444;
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Proof of Concept</h2>
<p>This, cobbled from the W3 schools tutorial on CSS tooltips. I added an Iframe inside the div; one may still interact therewith, yet enjoy full tooltipitude.</p>
<p> So, move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
<iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px" ></iframe>
</div>
</body>
</html>
See it live here :
https://faustsstudy.blogspot.com/p/blog-page_14.html
but it requires support for data URIs.