I have a paragraphed named dialog I am trying to add content to via ajax. The element is positioned like so:
<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">
<div style="position:fixed; top:50%; left:0; width:100%;">
<div style="height:150px; width:300px; margin:auto;">
<div>Processing</div>
<div>
<p id="dialog">Please Wait...</p>
</div>
</div>
</div>
</div>
Note I am calling:
$('#modal').show("fast");
before trying to add content to it.
Then I try to add to the dialog paragraph like so:
$.post(
'processor.php',
queryString,
function(data){
alert('data:'+data);
$('#dialog').html(data);
}
)
It does not innerHTML to the dialog paragraph. I tried adding the content to a different element that is not positioned, and it worked fine.
Anyone know why this is not working? or have a fix?
P.s. I know I should move my styles to a style sheet, I usually do that at the end.
Update
I wanted to let you know I only have 1 dialog id and it actually IS removing the text inside #dialog just not adding anything.
Also I am calling this in document.ready
You can see the page here click the submit button on the very bottom to see it happen.
update2
This is working correctly in FF and IE, its only not working in chrome.
if you view the console log, the text is there. try add css to the dialog something like :
#dialog { display:block; width:auto; height:auto;}
$(document).ready(function() {
// do stuff when DOM is ready
//Is your code called inside here or after this function is executed?
//If not, it should be.
});
Hiding it, then changing the text, then showing it again seems to get it to work. You have to animate both the hide and the show to get it to work tho:
$('#mydialog').hide("slow",function(){
$('#mydialog').html(data);
$('#mydialog').show("slow");
});
It doesn't look very elegant tho. I would prefer a better fix if someone has one.
edit:
A better looking work around I came up with is using 2 dialogs and toggling them as I change the text.
Related
HTML:
<li>
Plan Search
<div class="ac_subitem">
<span class="ac_close"></span>
<h2 style="border-bottom:1px #989898 dotted; Margin:0 20px;">Advanced Plan Search</h2>
TEST LINK
<li>Feature Under Construction</li>
</div>
</li>
CSS:
.ac_subitem {
width:1000px;
height:0px; /* animate to 400px */
top:50%;
right:0px;
margin-top:0px; /* animate to -200px */
position:fixed;
z-index:99;
overflow:hidden;
background:transparent url(../images/bg_menu.png) repeat top left;
}
Basically, I have a navigation set up via <ul></ul> each <li> contains an expandable <div>. What I am trying to do is add anchor tags to external links within these <div>s however the text/image used will not show up, the anchor is there and clickable but the contact itself will not appear, thus leaving me with a clickable blank space. any ideas?
Note: I do have the JS used to perform these actions, but it is quite lengthy. If necessary I can post that as well. thanks for your time in advanced!
Edit: Here is the fiddle for whole code used http://jsfiddle.net/8smk6mhs/. It doesn't seem to load properly in jsFiddle, however everything is loading fine using provided code in Dreamweaver6 links to jQuery and http://yourjavascript.com/0073145129/center-menu.js load it properly. Also a link to the completed template purchased for this project in comments.
Edit2: Have since gone through, validated, cleaned up the code. I have been trying to work through this problem for days now, and cannot grasp why this is happening. the fact that the anchor is active and works but Just cannot properly display contents of anchor is what really confuses me.
*I've updated the Fiddle.
On certain websites, when a link such as "read more" is clicked, a popup box will appear, and the behind webpage will often darken. The popup box then contains information and can be closed by clicking a button in the corner.
I'd like to make several of them. Would I do so simply by creating a div and pehaps another one with a transparency to "darken" the webpage behind the popup or is there a code I could use in javascript?
Generally people here are suggesting lightboxes, which work wonderfully for galleries, but are complete overkill for info boxes like this. Lightboxes can slow your website down alot, as they require a lot of assets to be included, multiple HTTP requests for .css files and .js files, when your problem could be solved via CSS and JS.
Check out this fiddle: http://jsfiddle.net/3vmL6/1/
In your code you have a a simple div of a class modal-dialog, which is automatically hidden in the css (see the fiddle).
<div id="info-modal" class="modal-dialog">
<div>
x
<h2>Hello!</h2>
<p>You can display any information you want here!</p>
</div>
A simple snippet of JQuery in your document is used to call a specific instance of the modal-dialog, allowing you to have multiple unique divs using different ID's, but all belonging to the same class.
$("#click-me").click(function () {
$.ajax({
success: function (data) {
console.log(data);
$('#info-modal').addClass("show");
},
async: true
});
});
$(".modal-dialog .close").click(function(){
$(this).closest(".modal-dialog").removeClass("show");
});
If you're doing it yourself, you'd put an overlay over the entire page and give it a high z-index so that it will cover all of your dom elements. Then have a div, with a higher z-index positioned where you need it to be with the content you want.
An easier approach is to use a library that already has that functionality baked in
jQuery UI dialog - http://jqueryui.com/dialog/
bootstrap modal - http://getbootstrap.com/javascript/#modals
I believe this is what you are looking for: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
What you are looking for is a lightbox/modal box. I recommand Magnific Popup because it works with responsive design, but colorbox is also very good.
You essentially are looking to work with modals so. Zurb provide a library to do just this for you in foundation. The library is called reveal. It's simple to use. I use it a good bit. You can see it here. Hope that helps.
http://zurb.com/playground/reveal-modal-plugin
This code should do what your asking for
window.onload = function() {
document.getElementById("member").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
<div id="overlay">
</div>
<div id="popup">
your readme text in here
</div>
#overlay
{
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup
{
display:none;
position:fixed;
left:40%;
top:40%;
width:600px;
height:500px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
they are called modals or dialogs, there are several frameworks that will help you in this case.
one of the most popular is bootstrap
http://getbootstrap.com/
I have a div,
<div id="messagebox" style="display: none; cursor: default">
<asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>
On click event, I am showing this div using,
$('#messagebox').show();
How can I put it in center of screen and also make background light dark, I want to dropdown list to trigger code behind so want to disable everything except this div,
I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo
http://jsfiddle.net/NnckT/9/
Sounds like you want this div to function as a modal; you can add a <div> covering the entire background, e.g.:
<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>
...and then show it via the same .show() method:
$('#cover').show();
You may also need to play with the z-index property of both to get the layering correct. You could also explore jQuery's Dialog system, if using jQuery UI is in the realm of possibilities.
This is essentially a 'modal pop-up functionality', also called 'dark box' pop-up. You can achieve the 'modal pop-up' functionality either with Javascript, or with 'pure CSS'; the latter will work even in case of Javascript disabled. Here is a link to Modal Pop-Up demo implemented as pure CSS3/HTML5 solution (no any javascripting): http://webinfocentral.com/html5/ModalPopUp.htm
Essential part of it utilizes target attribute as shown in the listing below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
Refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript) for the complete solution.
I would use som kind of modal plugin: Here is a couple, lots of examples out there. No reason to develop one of your own if no other requirements?
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
You can use jQuery BlockUI Plugin to block the screen with your desired div accessible as a popup in centre of the screen
$(document).ready(function() {
$('#someButton').click(function() {
$.blockUI({ message: $('#cover') });
});
});
See demos over here: http://www.malsup.com/jquery/block/#demos
try this ..
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height
$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();
this is the link
When you take the mouse over the four image boxes under 'TUI Exclusive Offering', you get the effect described in the question title.
html :
<div class="maindiv">
<img src="img/img.jpg" />
<div class="lower_div">
this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>
the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.
So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.
How to achieve those ?
Here is a working demo: http://jsfiddle.net/qbyeC/
The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.
$('.maindiv').on({
mouseenter : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:0,marginTop:0});
},
mouseleave : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
}
});
This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.
The css should be modified to your liking, but these are the important parts:
.maindiv {
overflow:hidden;
position:relative;
}
.lowerdiv {
position:absolute;
width:100%;
bottom:0px;
top:100%;
margin-top:-40px;
}
The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.
May be this will help you out.
SCRIPT
$(function(){
$(".maindiv").hover(function(){
$(this).children('.lowerdiv').stop().animate({top:0})
},function() {
$(this).children('.lowerdiv').stop()..animate({top:150})
})
})
HTML
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
CSS
.maindiv{
height:200px;
width:200px;
background:#CCC;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.lowerdiv{
height:200px;
width:200px;
background:#797987;
position:absolute;
top:150px;
}
jsfiddle - http://jsfiddle.net/tRYTq/4/
you need a negative position (as they did it on the tui page), start with something like
position:absolute;
bottom:-20px;
and try around until it fits.
using jquery you then can do something like:
$('.maindiv').hover(
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':0});
},
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
}
);
http://api.jquery.com/hover/
Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow
recently I come accross to a very nice responcive javascript what I would like to implement myself. You can see an example in here:
http://themes.iki-bir.com/alphine-wp/#! (by pressing on any of the thumbnails). Sorting the thumbnails is really an old trick, but to see extra content is something new for me.
As I am new to javascript maybe anybody knows any tutorials or lessons on this? thanks in advance!
This is "Isotope" - demos and tutorials here: http://isotope.metafizzy.co/
I thought you wanted to know how to do the sorting, because everything else is very simple :) if you could tell me how this sorting-trick-works/link, I'll give you my best explanation of the others :)
The More Content part, could be implemented by pure css, without any javascript. with this structure;
<div class="thumb">
<div class="img"></div>
<div class="content"></div>
</div>
and have this css present;
.thumb{
display:block;
width:100px;
height:100px;
}
.thumb div{
position:absolute;
width:inherit;
height:inherit;
}
.thumb div.content{
opacity:0;
}
.thumb:hover div.content{
opacity:1;
}
or you could listen to the ´onMouseOver´ event as soon as mouse enters. for the other part of loading the full description, listen to the ´onClick´ event and grab the information threw xhr.
Hide a div below each row of thumbnails. Change the content on the thumbnails onclick event handler. When the content has changed, make use of jQuerys slidetoggle: http://api.jquery.com/slideToggle/
At least thats how i would do it. Let me know if you want me to elaborate
Some example code:
$(function(){
$('.thumbnail').click(function(){
var $this = $(this);
var $divToShow = $this.nextUntil('div.container');
//fetch the divs content via ajax or however u want to do it here...
$divToShow.stop(true, true).slideToggle();
});
});
I would try http://api.jquery.com/slideDown/ for the very basics...
after that... it's just a mix of imagination and good taste :)
There's a lot of doc on jquery site... http://docs.jquery.com/UI/Effects/Slide
If you don't want to use a library like jQuery the easiest way to do it is to add divs with overflow hidden, position absolute and height 0 under each row and just expand them on onclick.