Showing who is online/offline using Javascript, PHP, PDO, CSS, html - javascript

I'm stuck on how to start on this. I think either JavaScript, or PHP is required, or both to perform this functionality I need.
I've got a list of member profiles on a page to which next to each member name, I have currently a placeholder using only CSS and html that SHOULD display whether or not a member who is logged in is online (green dot) or if a member is logged out, it shows that they are offline (grey dot).
I do not have any JavaScript or PHP written up at all as I don't know where to start..., but it would be needed just for this small section and know it's something I'd need to make it work. All I can do is provide what html I have and CSS I have. I'd like it to perform a scan of who is logged in/out at least every 15-30 seconds only refreshing this small section (online - green dot or offline - grey dot) rather than the entire page (which I'm sure JavaScript is best for this) and of course to see whether or not a member is in fact online/offline by running a query on the session[ID] (which I'm sure PHP/PDO is best practice). Could anyone help steer me in the right direction from just the little CSS and HTML I have?
HTML:
<div id="profile">
<img src="images/ImagePlacedHere.jpg" width="80" height="80" style="margin: 4px 5px; float: left;" />
<h2>Jason <online title="Online" /></h2>
</div>
<div id="profile">
<img src="images/ImagePlacedHere.jpg" width="80" height="80" style="margin: 4px 5px; float: left;" />
<h2>Nick <offline title="Offline" /></h2>
</div>
CSS:
#profile {
width: 300px;
height: 90px;
padding: 0;
margin: 10px 0 0 8px;
background: #222;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
float: left;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: relative;
top: -10px;
left: -3px;
}
#profile:hover {
background: rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
}
#profile h2 {
width: 195px;
height: 22px;
padding: 8px 0 1px 0;
margin: 0;
border-bottom: 1px solid #444;
float: left;
color: #B45F04;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315,strength=2,color=000000);
}
#profile h2 online {
width: 15px;
height: 15px;
padding: 0;
margin: 0;
background: #009D0D;
border: 2px solid #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
-webkit-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
float: right;
}
#profile h2 offline {
width: 15px;
height: 15px;
padding: 0;
margin: 0;
background: #222;
border: 2px solid #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
-webkit-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
float: right;
}
Here is a demo of what I have: http://jsfiddle.net/tZpk6/
If more information is needed, I might be able to provide some more (possibly)...

You are going to want to use AJAX (I suggest using jQuery for this, it hides a lot of boiler plate code) to query the server once every X seconds.
You will have a script on your server that queries your database, asking if a user is online. You are going to need to track when a user was last seen, and decide how long is long enough between page impressions by your given user to decide when they are offline (IE 5 mins).
From that, you can just return a true/false response from your PHP script and update your green/gray dot accordingly.
If you want to get even more advanced, you can look into something like NodeJS which with the help of Socket.IO you can keep track of users in real time.

It's got nothing to do with client side Javascript. It's got nothing to do with HTML. If these aren't obvious then you've got a long journey ahead of you. You did ask the question nealry 9 years ago - maybe the answer will make more sense now (not sure why stack overflow has pushed this up to the front page).
You need to implement this in the session management of your application back end. And it also means replacing most of the session management code provided by whatever platform you decide to build this on. Scanning the currently open sessions to see which are active is a fairly obvious solution - but if your session data is large that could get very slow very quickly. You could alleviate the impact the impact by dissociating the checks from user HTTP access, but personally I'd go with putting a decorator on top of the session handler and maintaining an active user list as a separate data store in a database. You need to check the time the data was created/last updated - most web based session managers use a garbage collection model based on inactivity to remove old sessions.

Related

Text gets out from its container

I cannot figure out why the whole fonts in the modern browsers don't fit its corresponding width? So, here we can see a brilliant example, where 84 goes out of its width borders... Why?
Example via devtools screenshot:
By the code:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 8px;
line-height: 2;
position: absolute;
text-align: right;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<span class="test">84</span>
The text itself (in white) stays inside of the span. The text-shadow you are applying is not taken into consideration for layouting since it is considered a purely aesthetic element.
If you want to prevent the text shadow from leaving the span, you can set overflow: hidden:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 80px;
position: absolute;
text-align: right;
text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
background: red;
overflow: hidden;
}
<span class="test">84</span>
And if you want to the box to expand to cover the shadow, you can add some padding as needed:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 80px;
position: absolute;
text-align: right;
text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
background: red;
padding: 0.1em;
}
<span class="test">84</span>
You can set shadow width to half of pixel (0.5px)
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 8px;
line-height: 2;
position: absolute;
text-align: right;
text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
}
<span class="test">84</span>

Disabling CSS transition on box-shadow property

Is it possible to disable transition of the box-shadow property on a button and enable it at the same time for different property values?
I have CSS:
#btn-more {
padding: 6px 28px;
font-size: 24px;
line-height: 36px;
letter-spacing: 1px;
color: #c6ca53;
background: #9e2a2b;
border: 1px solid #c6ca53;
box-shadow: 0 0 0 2px #9e2a2b;
transition-duration: .3s;
}
#btn-more:hover {
box-shadow: 22px 22px 0px 0px rgba(172, 76, 51, 0.5), 0 0 0 2px #9e2a2b;
}
<button id="btn-more">More</button>
So obviously I want box-shadow with #9e2a2b color property to be visible all the time and disable its transition. However :hover box-shadow should still get the transition on :hover.
Tried to implement this solution but with no luck. Is there any way around this?
Switch the order of the shadows in your :hover state and the initial shadow will remain constant:
#btn-more {
padding: 6px 28px;
font-size: 24px;
line-height: 36px;
letter-spacing: 1px;
color: #c6ca53;
background: #9e2a2b;
border: 1px solid #c6ca53;
box-shadow: 0 0 0 2px #9e2a2b;
transition-duration: .3s;
}
#btn-more:hover {
box-shadow: 0 0 0 2px #9e2a2b, 22px 22px 0px 0px rgba(172, 76, 51, 0.5);
}
<button id="btn-more">More</button>

how can make a div like a box like in image?

hi iam trying to do this
When i open page i need a popup at the center of page and so i created a div and set its display as 'none' .In document.ready i made it like
$("document").ready(function (){
$(".box").show();
});
so it will show the div.
But i want my div as like a popup like in attached image. how can i make a div like that witha 3d small shading and all??
updated code
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
It giving only bottom and right shadow.
Putting .box { box-shadow:-1px 2px 0.2em grey } in the CSS should make it somehow like the image.
.box {
background-color: #FFF;
width: 180px;
height: 80px;
box-shadow: 1px 1px 5px 1px rgba(255,255,255,0.5); /* x-offset y-offset blur size color */
}
For multi browser support, use prefixes like:
-o-box-shadow
-ms-box-shadow
-moz-box-shadow
-webkit-box-shadow
To get the desired result, play around with the x-offset, y-offset, blur and size properties.
Try something like this:
box-shadow: 0px 1px 4px 1px #777;
You can create it with help of http://www.cssmatic.com/box-shadow :
.scenario-callout-text-right {
width: 400px;
height: 200px;
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
}

How can i style a button from zero. Get rid of the button theme?

I want to get rid of the button basic Theme and make the button styleable as an a tag.
I want get rid of all of the ugly gray square in the button and substitute it with nothing as a link.
If you want to see my buttons, visit my website: "http://www.soundbust.com"
Here is my css code:
.button {
padding: 10px 25px;
-webkit-box-shadow: 0px 4px 0px #c8c8c8;
-moz-box-shadow: 0px 4px 0px #c8c8c8;
box-shadow: 0px 4px 0px #c8c8c8;
border-radius: 6px;
font-family: 'Questrial', sans-serif;
font-family: 12px;
color: #e4e4e4; /*#e4e4e4*/
text-decoration: none;
display: inline;
margin: 6px 0px;
background-color: #5a5a5a;
}
.button:hover {
background-color: #676767;
color: #d0d0d0 ;
-webkit-box-shadow: 0px 4px 0px #bababa;
-moz-box-shadow: 0px 4px 0px #bababa;
box-shadow: 0px 4px 0px #bababa;
}
This could be a great learning experience:
Take a look at how Bootstrap resets button-tags, especially for the "link" type. You can right-click on the link button and choose "Inspect Element..." to see its CSS styles.
It's late now so I'll post some actual code tomorrow if you haven't already figured it out by then :)

How can CSS/JavaScript create a push down effect on a click/mouseover event?

When you log into stackoverflow.com via gmail or similar., when you click on the gmail button, it appears to be pushed down.
How do you achieve this effect?
I know how to use CSS3 to make something look raised using a drop shadow. But how do you make it appear to move down.
It appears they are removing the shadow while at the same time shifting the div to the previous place of the shadow.
However I'd prefer a more continuous effect. I only need this to work in modern browsers.
Also, they are moving on a hover event, I need it on a click event.
Here is the CSS for the buttons. No JS is required.
.login-page .openid_large_btn {
width: 100px;
height: 60px;
border: 2px solid #DDD;
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
margin: 3px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 2px 2px 4px #ddd;
-moz-box-shadow: 2px 2px 4px #ddd;
-webkit-box-shadow: 2px 2px 4px #ddd;
}
.login-page .openid_large_btn:hover {
margin: 4px 0px 0px 6px;
border: 2px solid #999;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
element.style {
background: #fff url(http://cdn.sstatic.net/Img/openid/openid-logos.png?v=8);
background-position: -1px -1px;
}
As observed above,
margin-top and left is increased, while the other sides are set to 0, from 3px:
margin: 4px 0px 0px 6px;
border is darkened:
border: 2px solid #999;
shadows are removed:
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
To add transitions, add this:
.login-page .openid_large_btn {
-webkit-transition: all 0.05s ease-in-out;
-moz-transition: all 0.05s ease-in-out;
-o-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;

Categories