I want to add some transition like slidedown, fadein using jquery. when someone clicks on a title city. it opens with effect. I am trying it with jquery but it won't work. Any solution that where i am wrong or solution with css ?
Java Script Code :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//------------------- Jq used to show/open single div when click on title link -----------
function showDiv(obj)
{
$('.CityDivInner').css('display','block');
var div = $(obj).find('.CityDivInner').css('display','none');
}
</script>
<script>
$(document).ready(function(){
$(".CityDivOuter").click(function(){
$(".CityDivInner").slideDown("slow");
});
});
</script>
Css Code :
<style>
.CityDivInner
{
display:none;
}
</style>
</head>
Php Code :
<?php
$link = mysqli_connect("localhost", "root", "", "test");
// Check connection
if($link === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
$sql = "SELECT * FROM sample";
if($result = mysqli_query($link, $sql))
{
if(mysqli_num_rows($result) > 0)
{
echo "<div class='cityContainer'>";
while($row = mysqli_fetch_array($result))
{
echo "<div class='cityContainerInner' style='border: 2px solid black;' >
<p class='CityDivOuter' onclick='showDiv(this);'>City</p>
<div class='CityDivInner' style='border: 1px solid black;'>
<p class='CityTitle'>". $row['UserCity'] ."</p>
</div>
</div></br>";
}
echo "</div>";
// Close result set
mysqli_free_result($result);
}
else
{
echo "No records matching your query were found.";
}
}
else
{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
</body>
Check this code, This might help you!
$(document).ready(function(){
$('.expand').hide();
$(".expand, .collapse").click(function(){
$(".CityDivInner").slideToggle("slow");
$('.expand').toggle();
$('.collapse').toggle();
});
});
.CityDivInner{
width:300px;
height:100px;
background:#888;
}
.expand, .collapse{
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CityDivInner"></div>
<button class="expand">Expand</button>
<button class="collapse">Collpase</button>
Related
How do I implode the output of below code into divs instead of echo "On" or "Off"?
I also want the divs to have background color of green if node is ON, and background of red if node is OFF:
<html>
<body>
<?php
for ($ipa=65; $ipa <= 72; $ipa++){
$ip = "10.32.12.".$ipa;
$ping_output=array();
exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
//echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';
if(stripos($ping_output[2],"TTL")!==false) {
echo $ip." is On <br/>";
} else if(stripos($ping_output[2],"unreachable")!==false){
echo $ip." is unreachable <br/>";
} else if(stripos($ping_output[2],"request")!==false){
echo $ip." is Off <br/>";
}
}
?>
</body>
</html>
here is something that I did, hope it helps you:
back-end, q3.php
<?php
$result = array();
for ($ipa=65, $i = 1; $ipa <= 72; $ipa++, $i++){
$ip = "10.32.12.".$ipa;
$ping_output=array();
exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
//echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';
if(stripos($ping_output[2],"TTL")!==false) {
// echo $ip." is On <br/>";
$result["enode".$i] = "on";
} else if(stripos($ping_output[2],"unreachable")!==false){
// echo $ip." is unreachable <br/>";
$result["enode".$i] = "unreachable";
} else if(stripos($ping_output[2],"request")!==false){
// echo $ip." is Off <br/>";
$result["enode".$i] = "off";
}
}
echo json_encode($result);
?>
front-end, q3h.html
<!DOCTYPE html>
<html>
<head>
<title>Node Status</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#wrap {
width: 100%;
margin: auto;
}
div[id*="enode"] {
display: inline-block;
margin: 10px;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="enode1">Node1</div>
<div id="enode2">Node2</div>
<div id="enode3">Node3</div>
<div id="enode4">Node4</div>
<div id="enode5">Node5</div>
<div id="enode6">Node6</div>
<div id="enode7">Node7</div>
<button>update nodes</button>
</div>
<script>
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "q3.php",
dataType: 'json',
success: function (result) {
alert(result);
for (key in result) {
id = "#"+key;
if (result[key] == "on") {
$(id).css("background-color", "green");
}
if (result[key] == "unreachable") {
$(id).css("background-color", "yellow");
}
if (result[key] == "off") {
$(id).css("background-color", "red");
}
}
}});
});
});
</script>
</body>
</html>
so basically, this is what you should do, don't be shy and tell me if this works for you. :)
I create this code to show and hide div this code work but when i use it with php not work correctly when i click show for the first div he show me the div
but when i click the second he show me the first not the second how to solve this?
include("connect.php");
$sql=mysqli_query($conn,"select * from tbl_codelibrary order by db_id desc")or die(mysqli_error($conn));
echo'<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">';
echo"<tr>";
echo"<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Title</th>
<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Code</th>";
echo"</tr></thead><tbody>";
while($row=mysqli_fetch_array($sql)){
$title=$row['db_title'];
$code=$row['db_code'];
echo"<tr>";
echo"<td data-title='Title'>";echo $title;echo'<div id="opener">Show Code</div>';echo"<br/>";echo'<div id="upbutton"><a onclick="return hide();">Hide Code</a></div>'; echo"</td>";
echo"<td data-title='Code'>";echo"<pre><code class='' ><";?><?php echo $row['db_code'];?><?php echo"></code></pre>";echo"</td>";
}
?>
</body>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
You are creating an html in a loop where you are using fixed id value instead of a dynamic one. This cause an id conflict. So your code will not work as desired. This only takes the first id of the page always.
I have written some dynamic content as per your requirement below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="showContent buttonCode">Show Code</a>';
echo' ';
echo'<a class="hideContent buttonCode">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.showContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').show();
});
$('.hideContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').hide();
});
</script>
Hope this will help you.
If you want it with javascript only then you can do like below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="buttonCode" onclick="showbenefit('.$i.')">Show Code</a>';
echo' ';
echo'<a class="buttonCode" onclick="hidebenefit('.$i.')">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' id='benefits-".$i."' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script>
function showbenefit(s) {
if(document.getElementById('benefits-'+s).style.display=='none') {
document.getElementById('benefits-'+s).style.display='block';
}
return false;
}
function hidebenefit(h) {
if(document.getElementById('benefits-'+h).style.display=='block') {
document.getElementById('benefits-'+h).style.display='none';
}
return false;
}
</script>
function show_hide(){
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
else if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
<div id="benefits" style="display:block">test</div>
Submit
Hello! Hope this help you!
p.s you can use .toggle() to show and hide in JQuery
How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.
Here is the code I tried for -
<?php
$names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
My Css code --
<style>
#font-face {
font-family:roboto;
src: url("/roboto/Roboto-Medium.ttf")
}
.mydivCls {
background-image: url("1.png");
width: 325px;
height: 207px;
}
.mydivCls p {
font-family: roboto;
padding-top: 100px;
text-align: center;
}
</style>
And here is my script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
I'm getting following error in my console --
TypeError: document.getElementById(...) is null
document.getElementById('canvas'+i).appendChild(canvas);
Here is the solution I found --
<?php
/**
* This Script is used for converting a particular div to image
*/
?>
and my HTML code --
<?php
$names = [" ", "Kuldeep Kumar", "Rishabh Gaur", "AMIT RANJAN", "Vinay Agarwal", "MANJEET KUMAR", "Shuchi Singla", "Sumit Chaturvedi"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
and changes in script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
Code for image generation is correct, you have issue in your php part (all div have the same id). Need to increment $i variable:
<?php $i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++;
} ?>
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 -->
I am trying to load the result of a php page with .load() inside a html page. I want to load the results inside a div element with id id="div3_example_result" that i have included in the html page... I want the result to appear when I press one of the calendar date, because I am building a calendar..
I have build this function:
<script type="text/javascript">
window.onload = function(){
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"div3_example"
g_globalObject.setOnSelectedDelegate(function(){
var obj = g_globalObject.getSelectedDay();
alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);
$('#div3_example_result').load('insert.php');
});
};
</script>
and this is the html part
<body>
<br />
<div id="div3_example" style="margin-left: 500px; margin-top: 100px; border:dashed 1px red; width:205px; height:230px;">
</div>
<div id="div3_example_result" style="height:20px; line-height:20px; margin:10px 0 0 0; border:dashed 1px #666;">
</div>
</body>
But it does not function. Only the alert message appears when I click in one date, but the div is still empty..No result is uploaded...Can you help me please? Thanks in advance...
The php file:
<html>
<body>
<?php
$con = mysql_connect('127.0.0.1','root','');
if (!$con)
{
die('Lidhja me databazen nuk mund te kryhet' .mysql_error(). ' </body></html>');
}
if(!mysql_select_db("Axhenda",$con))
die('Nuk mund te hapet databaza Axhenda'.mysql_error(). '</body></html>');
$result = mysql_query("SELECT * FROM Perdoruesi");
$row = mysql_fetch_row($result);
echo $row[0]; // 42
echo $row[1]; // the email value
?>
</body>
</html>