I would like to add a popup message like the one that appears on Stack Overflow when I am not logged in and I try to use voting buttons.
What is the best method for achieving that?
Is it done using a jquery library?
EDIT: The code below shows how to replicate the bars that show at the top of the screen when you get a new badge, first come to the site, etc. For the hovering dialogs that you get when you try to comment too fast, vote for your own question, etc, check out this question where I show how to do this or just go straight to the example.
Here's how Stackoverflow does it:
This is the markup, initially hidden so we can fade it in:
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
X
</div>
Here are the styles applied:
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
And this is javascript (using jQuery):
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
And voila. Depending on your page setup you might also want to edit the body margin-top on display.
Here is a demo of it in action.
Also checkout jQuery UI Dialog
I use jqModal, easy to use and you can achieve some great effects
Using the ModalPopup in the AJAX control toolkit is another way you can get this effect.
Here's what I found from viewing the StackOverflow source. Hopefully saves some time for someone.
The showNotification function is used for all those popup messages.
var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};
//master...
showErrorPopup: function (e, h, f) {
var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
var i = function () {
g.fadeOutAndRemove()
};
$(e).append(g);
g.click(i).fadeIn("fast");
setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}
css
.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}
It's cool how they use the length of the message to set the fading timeout. I didn't realize all the (non-fading style) messages actually fade out after 30 seconds.
Check bootstrap. There are some pop-up effects, modals, transitions, alerts, everything based on javascript and css.
Related
I am making a message app with express and socket.io. The messages are appended to a list as shown below:
<div id="messageContainer">
<ul id="messages"></ul>
</div>
socket.on('message', (content) => {
$('#messages').append(`<li>${content.bold} ${content.std}</li>`);
$('#messages').scrollTop = $('#messages').scrollHeight;
});
The messages are appended correctly appended however the scrolling does not occur. I get no error message and I am unsure why.
The full source code can be found on GitHub here.
Edit
I have added a console.log('scroll') to the bottom of the js call however nothing is shown.
socket.on('message', (content) => {
$('#messages').append(`<li>${content.bold} ${content.std}</li>`);
$('#messages').scrollTop = $('#messages').height();
console.log('scroll')
});
This makes me think that scrolling isn't being called even thought the messages are being appended
jQuery objects have no property scrollHeight, change that to a function call of height.
$('#messages').scrollTop = $('#messages').height();
Try this
socket.on('message', (content) => {
$('#messages').append(`<li>${content.bold} ${content.std}</li>`);
$("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 1000);
console.log('scroll')
});
I have tried to create simulation of chat box.
During the overflow, height of element does not change, that's why #expressjs123's answer did not work, you'll need to use height of the content inside the chat box, which is scollHeight of the element.
The Element.scrollHeight read-only property is a measurement of the
height of an element's content, including content not visible on the
screen due to overflow.
Source: Element.scrollHeight
scrollHeight is the propery of the element therefor i have used vanilla javascript code to get scollheight.
var element = document.getElementById("messages");
element.scrollHeight;
Note: I have given you the basic overview that how can achieve the vertical scroll 100%, the code may vary with your code/project, you may need to put some effort, but this is the basic idea for what you are looking for.
setInterval(function() {
var element = document.getElementById("messages");
$("#messages").append("<p class='m" +parseInt((Math.random()) * 5)+ "'>Message #" + new Date().getTime() + "</p>");
$("#messages").scrollTop(element.scrollHeight);
}, 500);
#messages {
height: 300px;
width: 200px;
overflow: auto;
border: 1px solid #ddd;
background: #f1f1f1;
padding: 5px;
font-family:monospace;
}
p {
border: 1px solid #ddd;
background: #fff;
padding:4px;
font-size: 11px;
width: auto;
float: left;
clear: both;
margin: 2px 0;
border-radius:3px;
}
p.m4,p.m3,p.m0{
background: #f1f8ff;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages"></div>
In your git I'm seeing that you're using scroll method on #messageContainer not #messages, make sure to select correct element, else the code won't work.
scrolltop is a function, so you have to call it with (height) (jquery docs: https://api.jquery.com/scrolltop/#scrollTop2). (almost) every jquery thing is called with a function
I'm fairly new to coding, and I thought I had a good enough grasp on it to add a filter to a premade page, but I'm having issues getting the filter to work on the code below. The two infoboxes are supposed to be visible when you click "all" or "verse a" but not when you click "verse b" or any of the other buttons. If anyone can help, I'd be really grateful! The page itself is here.
#filters {
top: 10;
left: 0;
height: 50px;
width: 100%;
position: fixed !important;
z-index: 999999;
text-align:center;
}
#filters a:visited {
color:#ffffff;
text-transform:uppercase;
font-style:italic;
background:#6fc8de;
padding:3px 10px 3px 10px;
margin-left:3px;
margin-right:3px;
text-decoration:none;
letter-spacing:1px;
}
#filters a:hover {
color:#6fc8de;
background:#202020;
}
<script>
$(document).ready(function() {
$('a.filters').click(function() {
e.preventDefault();
$(".media").not("." + $(this).attr("rel")).hide(500);
$("." + $(this).attr("rel")).show(500);
});
});
</script>
It looks like there were two errors on your page originally (sorry we had you condense your code but it was too much to try and decipher, looking for flaws). If you look at this plunker you will see I have taken your original code (available from your earlier revisions) and modified two lines:
1. Include the infinite scroll plugin
//add this line to include the infinite scroll plugin
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js">
2.In the click function - accept event argument
We need to accept the event argument e as a parameter:
//accept argument e here, to avoid an error where 'e' is undefined in the call to preventDefault()
$('a.filters').click(function(e) {
e.preventDefault();
$(".media").not("." + $(this).attr("rel")).hide(500);
$("." + $(this).attr("rel")).show(500);
});
Edit:
We discovered that omitting the time parameter on the call to .hide() got the elements to hide as desired.
I have a problem with changing objects display property with Javascript.
I fill a table from data in a mysql database using php, and for each row it makes a DIV with display:none property as I want, and I have a simple JavaScript function to show/hide the div.
Here is css for div :
display:none; /*initially menu item is hidden*/
position: absolute; /*absolute positioning to float*/
background-color:#fff;
width:230px;
min-height:120px;
right:60px;
border:5px solid #ccc;
text-align:right;
direction:rtl;
padding:10px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
and this is the javascript :
function showfield (a) {
document.getElementById(a).style.display = "block";
}
function hidefield (a) {
document.getElementById(a).style.display = "none";
}
The function works and divs show at the place they must, but the problem is :
when I call the JavaScript function to show, it shows the div but the page scrolls to its top and for seeing the opened div I should scroll down, as my page is a report page it may be a long long page and this is not a good happening at all!
I can't understand why its happens and is there a way to prevent this auto scrolling?
please try below code its working for me.
<script>
function showfield(a)
{
document.getElementById(a).style.display = "block";
}
function hidefield(a)
{
alert(a);
document.getElementById(a).style.display = "none";
}
</script>
show
hide
<div id="myid">test content goes here</div>
try this thn....
HTMl
<a style="text-decoration:none; color:black;" href="#<?php echo("a".$cntr); ?>" onclick="return showfield(<?php echo($cntr); ?>)"><?php echo($cntr); ?></a>
JAVASCRIPT
function showfield(a){
document.getElementById(a).style.display = "block";
return false;
}
Javascript void didn't work for me.
My solution: try giving your button or the href="#mybutton" and id="mybutton". So the page will jump to the button (you can do this for the field too). If you give it href="#" it will jump to the top of the page. And href="" will reload the page and undo the function.
I have a site that has 4 subpages. I want to add nivo slider on each page in separate height. I've added 3 sliders successfully, but on one page I want to show nivo-controlNav with margin top 30px, how can I do that?
My code looks like this:
.nivo-controlNav {
text-align:center;
padding: 0;
}
It's good for my other 3 pages but I want to add:
.nivo-controlNav {
text-align:center;
padding: 0;
margin-top:30px;
}
Add this on the page wher u need margin in < head >< / head > section
<script type="text/javascript">
$(document).ready(function () {
$('.nivo-controlNav').css('margin','30px');
});
</script>
if that doesnt help try setting z-index, visible properties like above
$('.nivo-controlNav').css('z-index','1500');
$('.nivo-controlNav').css('visibility','visible');
You must add some class or id to separate from others. Then you write a style for that
particular class or id or use the inline style (Inline is not a good practice)
for example
.classname
{
margin-top:30px;
}
If it is on a completely separate page you can easily just add the second set of rules you have above. If they are all governed by one single style sheet you can do this
.differentClassName{
margin-top: 30px;
}
.nivo-controlNav {
text-align: center;
padding:10px 0px 0px 0px;
clear:both;
position: relative;
z-index: 10;}
this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.
Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)