I have some problems on the retrieving id from php on mysql, somewhat, for what I found out, is that the id is saving somewhere (eg: something like a cache) where it saves it and create a loop when I don't ask for a loop.
For example
you can see the chat windows. Where it shows the user you are talking and the list of user which are online. (Like facebook)
The problem here is that when I toggle where it says "Nuno Monteiro" chat message. it hides it, and goes to the id "1" in this case but if I click on "Joane" and do that the id it will show as "1" and after "2".
And when I go back to "Nuno" I can not toggle and hide again but it gives me the id as "1" then "2" then "1" again "2" like that.
What I want is to pick just the current id from the function callID(id) and just select that one.
Here below you have the code:
dashboard.php:
<div class="chat-data" id="chat-data" style="display:none;">
<?php
for ($i = 0; $i < count($result); $i++) {
if($result[$i]['online'] == 0) {
echo "<span onclick='callID(".$result[$i]['id'].");' class='user-btn".$result[$i]['id']."' style='padding: 7px; display:inline-block; position: relative; border-bottom: 1px solid #ccc; width: 100%; cursor: pointer;'><span class='offline'></span> ".$result[$i]['firstname']." ".$result[$i]['lastname']."</span>";
} else {
echo "<span onclick='callID(".$result[$i]['id'].");' class='user-btn".$result[$i]['id']."' style='padding: 7px; display:inline-block; position: relative; border-bottom: 1px solid #ccc; width: 100%; cursor: pointer;'><span class='online'></span> ".$result[$i]['firstname']." ".$result[$i]['lastname']."</span>";
}
}
?>
</div>
This is the part from the chat(1) window.
The part of "Nuno Monteiro" window is also from dashboard.php, which is the following code:
<div class="chat-user" style="display: none;">
<div class='user-title'>
<span class="titles"></span>
<span class='pull-right remove_field'>X</span>
</div>
<div class="chat-time">
<div class="msg_data" id="msg_data">
<div class="friend_pic pull-left">
<img src="<?php echo $domain; ?>resources/img/babox_logo.png" data-toggle="tooltip" data-placement="bottom" title="Nuno Monteiro" />
</div>
<div class="friend">
<span>Hey There are you ok?</span>
</div>
<div class="your_pic pull-right">
<img src="<?php echo $domain; ?>resources/img/babox_logo.png" data-toggle="tooltip" data-placement="bottom" title="You" />
</div>
<div class="you">
<span>I am fine!</span>
</div>
</div>
<div class="msg_box" id="msg_box">
<textarea id="chatbox"></textarea>
</div>
</div>
</div>
The $domain variable is where I get my website name so I don't need to change it in every code I have and change it only there.
That is picking up results from $db = new DbManager(); and the variable $result will execute the select by doing: $result = $db->execute_select($sql)
The $sql variable is: "SELECT * FROM users";
Then we going pass through our jQuery function (which I mention above):
function callID(id) {
$(".chat-time").prop("id",id);
$(".chat-user").hide();
$(".remove_field").click(function() {
$(".chat-user").hide();
});
$.post('callID.php', {id : id }, function(rID) {
// nothing on here
$(".user-title").click(function(e) {
$('#' + rID).toggle();
e.preventDefault();
alert(rID);
});
if(id == rID) {
$(".chat-user").show();
$(".user-title span.titles").html($(".user-btn" + rID).text());
} else {
$(".chat-user").hide();
}
});
}
this is part from my general.js script.
Then the script will go pick the information to the callID.php:
<?php
include('application/database/dbmanager.php');
$db = new DbManager();
$sql = "SELECT id FROM users WHERE id='".$_POST['id']."'";
$db->execute_select($sql);
echo $_POST['id'];
?>
What I wanted to happen is that when I toggle in the online user chat on each username, go pick only the id of that user, so later I can save the messages in database and pick it up.
Related
I'm a complete beginner in php and I am working on a front end project where I have to create a hangman game based on 12 island names stored in a mysql xampp server . I have to get a random island from the database as an unordered string displayed in my html and guess which island it is . I have no idea how to implement this using php since I am a complete beginner but I have watched tutorials about how to send data from html forms to an sql server with php . I guess this is kinf of the opposite task .
I have written complete html css and js code about displaying my hangman game and I use a simple word to be displayed randomly via javascript and when you fill the spaces a submit button appears .
function hangman(){
var island = "Santorini"; //the given word that is supposed to be found
var t = document.createTextNode(shuffleWord(island))
document.getElementById("hidden-word").appendChild(t);
createSpaces(island);
const inputLists = document.querySelectorAll("input");
document.querySelectorAll("input").forEach(el => {
el.addEventListener('input', evt => {
const showButton = [...inputLists].filter(ip => ip.value.trim() !== '').length === inputLists.length;
document.getElementById('submitbtn').style.display = showButton ? 'block' : 'none';
});
});
}
function shuffleWord (word){
var shuffledWord = '';
word = word.split('');
while (word.length > 0) {
shuffledWord += word.splice(word.length * Math.random() << 0, 1);
}
return shuffledWord;
}
function createSpaces(text){
for(var i=0;i<text.length;i++){
var space = document.createElement("input");
space.setAttribute("class" , "dash");
document.getElementById("hangman-container").appendChild(space);
}
}
.transparent-box{
border:none;
position:absolute;
top:10%;
left:15%;
background-color:black;
height:500px;
width:70%;
opacity: 0.6;
}
.transparent-box p{
color:white;
text-align:center;
}
.transparent-box h1{
color:white;
position: relative;
text-align:center;
font-size:20px;
top:30px;
}
#hangman-container{
position: relative;
width:auto;
top:30%;
left:0%;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.dash{
margin:0;
padding:20px;
align-items: flex-start;
width:4%;
border:none;
border-radius: 5%;
background-color: turquoise;
color:red;
font-size:40px;
}
.dash:focus{
opacity:0.8;
}
#submitbtn{
display: none;
position: absolute;
top:200%;
left:80%;
float:right;
}
<body onload=hangman()>
<div class="transparent-box" id="t-box">
<p>Play here </p>
<h1 id="hidden-word">The word is : </h1>
<form id="hangman-container" method="POST">
<button type="submit" class="hide" id="submitbtn">Submit</button>
</form>
</div>
</body>
The problem is how to use php to get a random island name from my database and display it instead of sending a string via javascript .
I would appreciate your help with this . Thank you in advance .
First create a table:
CREATE TABLE islands(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL
);
Insert the islands names there (add as many as you wish in place of the ...):
INSERT INTO islands(name) VALUES
("Santorini"),("Tassos"),...;
Now the following SELECT query will fetch one random island name from the DB:
SELECT name
FROM islands
ORDER BY RAND()
LIMIT 1;
In PHP you can execute the query like this:
// replace the words in uppercase with your actual credentials!
$link = #mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
if(!$link){
echo 'Error connecting to the DB';
exit;
}
$sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
$result = #mysqli_query($link, $sql);
if(!$result){
echo 'There is an issue with the database';
exit;
}
$row = #mysqli_fetch_assoc($result);
// This will give you the random island name (if they are inserted properly)
echo $row['name']??'No islands are inserted in the database yet';
Now to shuffle it, we can use str_shuffle() function. Finally your code may start to look like this:
<body onload=hangman()>
<div class="transparent-box" id="t-box">
<p>Play here </p>
<h1 id="hidden-word">The word is :
<?php
// replace the words in uppercase with your actual credentials!
$link = #mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
if(!$link){
echo 'Error connecting to the DB';
exit;
}
$sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
$result = #mysqli_query($link, $sql);
if(!$result){
echo 'There is an issue with the database';
exit;
}
$row = #mysqli_fetch_assoc($result);
echo str_shuffle($row['name']);
?>
</h1>
<form id="hangman-container" method="POST">
<button type="submit" class="hide" id="submitbtn">Submit</button>
</form>
</div>
</body>
Now you will need to adjust your JavaScript code of course.
I have a dropdown menu geneated by php and javascript. The code is the below one:
<script type="text/javascript">
$(document).ready(function() {
<?php $query = "sp_region_info 0";
$select_region_query = sqlsrv_query($con, $query);
while ($row = sqlsrv_fetch_array($select_region_query)) {
$region_id = $row['region_id'];
$region_name = $row['region_name'];
$result_array[]= $region_name;
}
$json_array = json_encode($result_array);
?>
var country = <?php echo $json_array; ?>;
$("#region").select2({
data: country
});
});
</script>
<div class="input-group col-sm-3 search">
<label class="bd-form-label">Destination</label>
<select id="country"></select>
</div>
It is working properly I can search and use it as dropdown.
I was wonder whats the way to display next to results an icon?
e.g
That's my result: https://i.stack.imgur.com/b2FhA.png
And I need to display my Icon next to Destination title:
https://i.stack.imgur.com/Bq0Z0.png
I tried by adding <i class="fa fa-map-marker"></i> inside my div but doesnt work..
Any thoughts ?
You can't use <i> tag in select option, instead you can use unicode:
while ($row = sqlsrv_fetch_array($select_region_query)) {
$region_id = $row['region_id'];
$region_name = $row['region_name'] . ' ';
$result_array[]= $region_name;
}
and use this css:
.select2-results__option {
font-family: 'FontAwesome', 'Tahoma'
}
Example
OR a simpler solution is using pseudo element:
.select2-results__option::after {
content: "\f041";
font-family: FontAwesome;
}
Example
Add the <i> within your while loop like this:
while ($row = sqlsrv_fetch_array($select_region_query)) {
$region_id = $row['region_id'];
$region_name = $row['region_name'].'';
$result_array[]= $region_name;
}
you can do it just using css, for example:
.select2-results__option:after {
content: '\F041';
font-family: FontAwesome;
font-size: 20px;
color: pink;
}
Thats work for me)
Im having an issue where i can't seem to assign an ID from a column in the database to each DIV respectively.
The Scenario: I have a page full of clients and next to each one is a vote up and vote down button. When i click one of them it simply adds +1 to either the positive or negative column.
What is the Issue? The issue is no matter which client i vote for it only updates the ClientID '1'
What have i done so far?
I am using a while loop to retrieve all the clients from the
database. I have given each div that comes through a data-clientid
for $_POST['ClientID'].
I have classes called voteup and votedown so i can reference them in
my JS script.
In my script i assign the clientid from data-clientid to variables
using the classes voteup and votedown
In the voteup/down php files i then use this clientid to use the
update sql to update the column.
What is my code?
My main page that displays the clients and the voting buttons (Shortened to the bit you need to see, connection to the database is included and all of that works fine)
<?php
$clientInfo = "SELECT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);
echo "<div style='width: 100%; display: inline-block;'>";
while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" .
"
<div style='width: 35%;'></div>
<div onclick=\"voteUp()\" style='display: inline-block; width: 5%;'>
<span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
</div>" .
"<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" .
"<div onclick=\"voteDown()\" style='display: inline-block; width: 5%;'>
<span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
</div>
<div style='width: 35%;'></div>
</div>
<br />";
}
echo "</div>";
?>
This then links to my scripts file with my JQuery (I set it up to print the ID in the console so i can see which ID it is hitting. Im just going to take Vote Up as an example)
window.voteUp = function() {
var clientid = $(".voteup").data("clientid");
$.post("voteup.php", {clientid: clientid}, function(data) {
console.log("Data:" + clientid)
});
return false;
}
and then there is the voteup.php that i am referring to in my $.post
<?php
if (isset($_POST['clientid'])) {
$voteup = "UPDATE Clients SET Pos = (SELECT MAX(Pos) FROM Clients) + 1 WHERE ClientID = " . $_POST['clientid'];
$stmt = sqlsrv_query($conn, $voteup);
} else {
echo "Failed";
}
?>
Javascript issue
As stated in comments, your Javascript code is getting only the first voteup element in the DOM Tree.
you need to use a dynamic way to find the specific voteup div for the client that you are voting up (or down), try this:
while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" .
"
<div style='width: 35%;'></div>
<div style='display: inline-block; width: 5%;'>
<span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
</div>" .
"<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" .
"<div style='display: inline-block; width: 5%;'>
<span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
</div>
<div style='width: 35%;'></div>
</div>
<br />";
}
I've just removed the onclick event of your vote-up and vote-down buttons.
Now you need only one script:
<script>
$(".vote-up").click(function(){
var clientId = $(this).parents(".clientid").find(".voteup").data("clientid");
$.post("voteup.php", {clientid: clientid}, function(data) {
console.log("Data:" + clientid)
});
return false;
});
$(".vote-down").click(function(){
var clientId = $(this).parents(".clientid").find(".votedown").data("clientid");
$.post("votedown.php", {clientid: clientid}, function(data) {
console.log("Data:" + clientid)
});
return false;
});
</script>
Basically we are getting the top parent of vote-up button, the div.clientid, and with it, we search for the div.voteup that contains the clientid data
PHP Issue
Also, your UPDATE query is wrong, you are selecting the MAX(pox) from Clients through a subquery without the where clause, try this:
$voteup = "UPDATE Clients SET Pos = (SELECT MAX(Pos) FROM Clients WHERE ClientID = " . $_POST['clientid']. ") + 1 WHERE ClientID = " . $_POST['clientid'];
Later, try to transform your queries into parametrized queries, to avoid sql injection issues.
$(document).ready(function() {
if ($("#grid .media-box").hasClass("brand1")) {
$("#grid .media-box-content").addClass("brand01")
};
}
});
and in body looping div grid
<div id="grid">
<?php foreach($data as $items) { ?>
<div class="media-box video <?php echo $items->brand; ?> <?php echo $items->country; ?>">
<div class="media-box-image">
<div data-width="240" data-height="168" data-thumbnail="gallery/thumbnails/thumb-2.jpg"></div>
<div data-type="iframe" data-popup="https://www.youtube.com/watch?v=5guMumPFBag" title="Psico dell consecteture"></div>
<div class="thumbnail-overlay">
<i class="fa fa-video-camera mb-open-popup"></i>
<i class="fa fa-link"></i>
</div>
</div>
<div class="media-box-content">
<div class="media-box-title">Psico dell consecteture</div>
<div class="media-box-date">
<?php echo $items->country; ?></div>
<div class="media-box-text">Lorem ipsum dolor sitam psico.</div>
<div class="media-box-more"> Read more
</div>
</div>
</div>
<?php } ?>
</div>
CSS:
.media-box {
font-size: 13px;
}
.brand01 {
background: blue !important;
}
.media-box-content {
padding: 20px;
position: relative;
color: rgb(51, 51, 51);
line-height: 17px;
}
The above code is not working for me.
<?php echo $items->brand; ?> <?php echo $items->country; ?>" >
is fetching 2 classes to the dive from database.
$("#grid .media-box.brand1").find(".media-box-content").addClass("brand01")
Your code will add class brand01 to all .media-box-content if the condition is true.
There is no need to use if condition, you can use .toggleClass() with second arg as function which returns a boolean value as true/false:
$(document).ready(function() {
$("#grid .media-box-content").toggleClass("brand01", function(){
return $(this).closest(".media-box").hasClass("brand1");
});
});
I feel you need to target the each .media-box-content and find the parent .media-box has the class, if has true then add it if false remove it.
Use this, it will work
$(document).ready(function() {
$("#grid .media-box").each(function(index, element) {
if ($(this).hasClass("brand1")) {
$(this).children(".media-box-content").addClass("brand01")
}
});
});
I am using HumHub, based on Yii, and trying to set a JS variable with a URL extracted from a function that enriches text.
Currently, the variable doesn't seem to be getting set in the model, so I haven't even really begin to work on the script.
It should fetch OpenGraph data eventually, but I can't even get the URL to the script I intend to debug and use.
Base enrichText function
/**
* Converts an given Ascii Text into a HTML Block
* #param boolean $allowHtml transform user names in links
* #param boolean $allowEmbed Sets if comitted video links will embedded
*
* Tasks:
* nl2br
* oembed urls
*/
public static function enrichText($text, $from = 'default', $postid = '')
{
if ( $from == 'default' ) {
$maxOembedCount = 3; // Maximum OEmbeds
$oembedCount = 0; // OEmbeds used
// Parse bbcodes before link parsing
$text = self::parseBBCodes($text);
$text = preg_replace_callback('/(?<!\])(https?:\/\/.*?)(\s|$)(?!\[)/i', function ($match) use (&$oembedCount, &$maxOembedCount) {
// Try use oembed
if ($maxOembedCount > $oembedCount) {
$oembed = UrlOembed::GetOembed($match[0]);
if ($oembed) {
$oembedCount++;
return $oembed;
}
}
$regurl = "/(http|https)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// Check if there is a url in the text independently and render to JS var
if(preg_match($regurl, $text, $url)) {
if (!empty($postid)) {
Yii::app()->clientScript->setJavascriptVariable("ourl".$postid, $url[0]);
}
}
return HHtml::link($match[1], $match[1], array('target' => '_blank')).$match[2];
}, $text);
// get user and space details from guids
$text = self::translateMentioning($text, true);
// create image tag for emojis
$text = self::translateEmojis($text);
return nl2br($text);
} else {
// Parse bbcodes before link parsing
$text = self::parseBBCodes($text, $from);
return $text;
}
}
Calling info
<?php
/**
* This view represents a wall entry of a post.
* Used by PostWidget to show Posts inside a wall.
*
* #property User $user the user which created this post
* #property Post $post the current post
*
* #package humhub.modules.post
* #since 0.5
*/
?>
<div class="panel panel-default post" id="post-<?php echo $post->id; ?>">
<div class="panel-body">
<?php $this->beginContent('application.modules_core.wall.views.wallLayout', array('object' => $post)); ?>
<span id="post-content-<?php echo $post->id; ?>" style="overflow: hidden; margin-bottom: 5px;">
<?php print HHtml::enrichText($post->message, 'default', $post->id); ?>
</span>
<a class="more-link-post hidden" id="more-link-post-<?php echo $post->id; ?>" data-state="down"
style="margin: 20px 0 20px 0;" href="javascript:showMore(<?php echo $post->id; ?>);"><i
class="fa fa-arrow-down"></i> <?php echo Yii::t('PostModule.widgets_views_post', 'Read full post...'); ?>
</a>
<div id="opengraph-<?php echo $post->id; ?>" class="opengraph-container">
<div class="opengraph-img-<?php echo $post->id; ?>"></div>
<div class="opengraph-body">
<h2 class="opengraph-heading-<?php echo $post->id; ?>"></h2>
<div class="opengraph-content-<?php echo $post->id; ?>"></div>
</div>
</div>
<?php $this->endContent(); ?>
</div>
</div>
<script type="text/javascript">
console.log('Oembed URL for <?php echo $post->id; ?>: '+ourl<?php echo $post->id; ?>);
// ... etc
Update I was able to pass the variable by adding a script to the end of the text. Very, very dirty method. I was hoping for something much cleaner. :(
/**
* Converts an given Ascii Text into a HTML Block
* #param boolean $allowHtml transform user names in links
* #param boolean $allowEmbed Sets if comitted video links will embedded
*
* Tasks:
* nl2br
* oembed urls
*/
public static function enrichText($text, $from = 'default', $postid = '')
{
if ( $from == 'default' ) {
$maxOembedCount = 3; // Maximum OEmbeds
$oembedCount = 0; // OEmbeds used
// Parse bbcodes before link parsing
$text = self::parseBBCodes($text);
$text = preg_replace_callback('/(?<!\])(https?:\/\/.*?)(\s|$)(?!\[)/i', function ($match) use (&$oembedCount, &$maxOembedCount) {
// Try use oembed
if ($maxOembedCount > $oembedCount) {
$oembed = UrlOembed::GetOembed($match[0]);
if ($oembed) {
$oembedCount++;
return $oembed;
}
}
return HHtml::link($match[1], $match[1], array('target' => '_blank')).$match[2];
}, $text);
// get user and space details from guids
$text = self::translateMentioning($text, true);
// create image tag for emojis
$text = self::translateEmojis($text);
$regurl = "/(http|https)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// Check if there is a url in the text independently and render to JS var
if(preg_match($regurl, $text, $url)) {
if (!empty($postid)) {
$text .= '<script type="text/javascript"> var ourl'.$postid.' = \''.$url[0].'\'; </script>';
}
}
return nl2br($text);
} else {
// Parse bbcodes before link parsing
$text = self::parseBBCodes($text, $from);
return $text;
}
}
Update 2: Attempt to grab Opengraph data
Here i attempt to grab the data from opengraph with the supposed set variable in the HHtml::enrichText() return. However I get the error: SyntaxError: expected expression, got '<' jquery.js:1 pointing to the first line of the jquery file, which is the commenting and license of the script.
The script also doesn't show in source code
<?php
/**
* This view represents a wall entry of a post.
* Used by PostWidget to show Posts inside a wall.
*
* #property User $user the user which created this post
* #property Post $post the current post
*
* #package humhub.modules.post
* #since 0.5
*/
?>
<div class="panel panel-default post" id="post-<?php echo $post->id; ?>">
<div class="panel-body">
<?php $this->beginContent('application.modules_core.wall.views.wallLayout', array('object' => $post)); ?>
<span id="post-content-<?php echo $post->id; ?>" style="overflow: hidden; margin-bottom: 5px;">
<?php print HHtml::enrichText($post->message, 'default', $post->id); ?>
</span>
<a class="more-link-post hidden" id="more-link-post-<?php echo $post->id; ?>" data-state="down"
style="margin: 20px 0 20px 0;" href="javascript:showMore(<?php echo $post->id; ?>);"><i
class="fa fa-arrow-down"></i> <?php echo Yii::t('PostModule.widgets_views_post', 'Read full post...'); ?>
</a>
<div id="opengraph-<?php echo $post->id; ?>" class="opengraph-container">
<div class="opengraph-img-<?php echo $post->id; ?>"></div>
<div class="opengraph-body">
<h2 class="opengraph-heading-<?php echo $post->id; ?>"></h2>
<div class="opengraph-content-<?php echo $post->id; ?>"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
(function() {
var opengraph = "http://bfxsocial.strangled.net/resources/Opengraph/getInfo.php?callback=?";
$.getJSON( opengraph, {
href: ourl<?php echo $post->id; ?>,
format: "json"
})
.done(function( data ) {
console.log('<?php echo Yii::t('PostModule.widgets_views_post', 'Opengraph: Response from: '); ?>'+ourl-<?php echo $post->id; ?>+"\n\n"+data);
var img = $('<img />',{ id: 'og:img-<?php echo $post->id; ?>', src: data['og:image'], alt:'data.title'}).appendTo($('.opengraph-img-<?php echo $post->id; ?>'));
$('.opengraph-heading-<?php echo $post->id; ?>').html(data.title);
$('.opengraph-body-<?php echo $post->id; ?>').html(data.description);
$('#opengraph-<?php echo $post->id; ?>').show();
});
})();
});
</script>
</div>
<?php $this->endContent(); ?>
</div>
</div>
<!-- Opengraph Temp Style -->
<style type="text/css">
.opengraph-container
display: none;
width: 100%;
padding: 3px;
margin: 5px;
background-color: rgba(0,0,0,0.1);
border: 1px solid rgba(150,150,150,0.1);
}
.opengraph-img {
display: block;
min-width: 99%;
max-height: 350px;
margin: 0 auto;
}
.opengraph-body {
width: 99%;
padding-top: 5px;
border-top: 1px solid rgba(0,0,0,0.1);
}
.opengraph-heading {
display: block;
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.opengraph-content {
font-size: 12px;
color: #7F7F7F;
}
</style>
<!-- End: Opengraph Temp Style -->