I used bootstrap in my project. in each tab i show a chart my problem is the div display attribute is none and after user clicked on a tag the div display changes to the block. also i wrote a function to handle displaying the chart. but when user clicks on the tab chart not showing. but if i remove the display:none attribute its showing with no problem.
this is my div :
<div id="bar" style="display: none">
<?php echo chart($title,$data,'Bar');?>
</div>
and this is my chart function :
function chart($title,$data,$type){
ob_start();
?>
<script src="<?php echo url()?>/assets/chart/Chart.min.js" type="text/javascript"></script>
<script src="<?php echo url()?>/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<canvas style="display: block;margin: 0 auto;" id="myCanvas" width="600" height="300"></canvas>
<script>
$(function(){
var ctx = $('#myCanvas').get(0).getContext('2d');
var barChartData = {
labels : <?php echo json_encode($title) ?>,
datasets : [
{
fillColor : "rgba(10, 150, 100, 0.8)",
strokeColor : "rgba(24, 107, 2, 0.8)",
highlightFill: "rgba(4, 20, 60, 0.9)",
highlightStroke: "rgba(5, 35, 70, 1)",
data : <?php echo json_encode($data) ?>
}
]
};
var pieChart = new Chart(ctx).<?php echo $type?>(barChartData);
});
</script>
<?php
$view = ob_get_clean();
return $view;
}
and this is the script that shows the div when its clicked:
$('#aBar').on('click',function(){
$('#circle').css('display','none');
$('#line').css('display','none');
$('#bar').css('display','block');
});
Solved. I just have to set visibility to hidden and when user clicked on a tag set this to visible and everything is okay.
Related
hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?
<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);">
<div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" >
<p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);">
</div>
<script>
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
document.getElementById("pending_req_"+id).style.display="none";
}
}
</script>
Well, there are various ways to achieve this.
You could for example trick by setting a little timeout that will allow the mouse to reach the user details html node and vice-versa.
Let me be more explicit, according to your case
<?php
class Friend
{
public $Friend_id;
public $Friend_details;
public $Friend_image;
public function __construct($id, $details, $image){
$this->Friend_id = $id;
$this->Friend_details = $details;
$this->Friend_image = $image;
}
}
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
?>
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" />
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>">
<h5>User details</h5>
<?php echo $print->Friend_details; ?>
</div>
<style>
.user_details {
display: none;
background-color: lightgray;
width: 250px;
padding: 15px;
}
</style>
<script>
var userImages = document.getElementsByClassName('user_image');
for(var i = 0; i < userImages.length; i++){
var
userImage = userImages[i],
userId = userImage.id.replace('user_image_', ''),
thisUserDetails = document.getElementById('user_details_' + userId),
mouseOutTimeout = 100, // Here is the trick
mouseTimer = null; // Needed in order to hide the details after that little timeout
userImage.addEventListener('mouseout', function(){
mouseTimer = setTimeout(function(){
thisUserDetails.style.display = 'none';
}, mouseOutTimeout);
});
userImage.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
thisUserDetails.style.display = 'block';
});
thisUserDetails.addEventListener('mouseout', function(){
var _this = this;
mouseTimer = setTimeout(function(){
_this.style.display = 'none';
}, mouseOutTimeout);
});
thisUserDetails.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
});
}
</script>
Note: I've used getElementsByClassName and addEventListener here, that are not compatible with IE8 and earlier. Check this link for getElementsByClassName compatibility and this one for addEventListener.
Hope it help.
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
<img src="4.jpg" />
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
I am exporting html to pdf. Without image in html content PDF exporting properly,But if I add image to HTML content it creates blank pdf.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script>
function toPdf() {
var doc = new jsPDF();
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#editor' : function(element, renderer) {
return true;
}
};
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('#render_me').get(0), 30, 50, {
'width' : 170,
'elementHandlers' : specialElementHandlers
});
doc.save('sample-file.pdf');
}
Give id="render_me" to div what you want to render. for example
<table id="render_me"></table>
When using the fromHTML() it's important to save the pdf in the callback, because else it won't be done rendering by the time it saves the doc.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script>
$(document).ready(function() {
var doc = new jsPDF();
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
}, function () {
doc.save('sample-file.pdf')
});
});
});
</script>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
<img src="//i.imgur.com/7NtRajR.jpg" />
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
Demo: https://jsfiddle.net/qcyspvy7/
I'm creating a 5 star rating system with html php and jquery i dont know how to stop the stars rating when user has clicked on rating.
In my code when user click on 4 stars the alert box shows 4 stars but when the user move his mouse from stars the stars shows 0 rating.
here is my code, i'm not posting the css here
HTML :
<div class="rating">
<div class="ratings_stars" data-rating="1"></div>
<div class="ratings_stars" data-rating="2"></div>
<div class="ratings_stars" data-rating="3"></div>
<div class="ratings_stars" data-rating="4"></div>
<div class="ratings_stars" data-rating="5"></div>
</div>
JQUERY :
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
$('.ratings_stars').click(function() {
$('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
$(this).addClass('selected'); // Adds the selected class to just the one you clicked
var rating = $(this).data('rating');
alert(rating);
// Get the rating from the selected star
$('#rating').val(rating); // Set the value of the hidden rating form element
});
Guessing because you haven't said what you expect to happen. It could be that you want the selected rating, and the stars before it, to be highlighted.
So instead of this
$(this).addClass('selected');
you use this, similar to how you have previously.
$(this).prevAll().andSelf().addClass('selected');
But I would also remove the hover class so that it's obvious to the user on click
$(this).prevAll().andSelf().addClass('selected').removeClass('ratings_over');
Demo
<!--SAVE AS WHATEVAUWANNA.HTML AND TEST-->
<html>
<head>
<title>Rating System jQuery Plug by Aldanis Vigo</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<style type='text/css' language='css'>
.record{
opacity: .50;
}
#value-display{
position: relative;
top: -5px;
margin-left: 10px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<span value='0' id='ratingbar'>
<img class='record' number='1'/>
<img class='record' number='2'/>
<img class='record' number='3'/>
<img class='record' number='4'/>
<img class='record' number='5'/>
<span id='value-display'>0 / 5</span>
</span>
</body>
<script>
//Change these variables to your liking!!
var iconsrc = 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Record2.png';
var iconwidth = '20px';
var iconheight = '20px';
var value = $('#ratingbar').attr('value');
$('#ratingbar img').each(function(){
//Set the icon for each
$(this).attr('src', iconsrc);
$(this).attr('width', iconwidth);
$(this).attr('height', iconheight);
$(this).hover( function(){
$(this).css('opacity','1');
$(this).prevAll().css('opacity','1');
});
$(this).click( function(){
//Clear all of them
$(this).parent().attr('value',$(this).attr('number'));
$(this).parent().children('#value-display').html($(this).attr('number') + ' / 5');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}else{
$(this).css('opacity','.50');
}
});
});
$(this).mouseout( function(){
$(this).css('opacity','.50');
$(this).prevAll().css('opacity','.50');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}
});
});
});
</script>
</html>
So I have a table where each cell is a name of a game and when you click it it needs to show in a fancybox the results of the user which clicked the cell (I use table Indexes to get the GameID and the Session variable to get userID) which will be used to load the results from a second PHP page.
If I click on a cell for the first time the fancybox will not display anything and after I close fancybox and click on any cell again it works fine. Am I doing something wrong?
This is the whole javascript:
$(".jogos").fancybox({
'hideOnContentClick': true,
'onComplete':function(element)
{
var gameIdx = $(element).index();
var cateIdx = $(element).parent().parent().index();
var gameIdxPHP;
var catIdxPHP;
var gameID;
var userId = '<?php echo $_SESSION['userID']; ?>'
<?php
for ($i=1; $i<= count($categoryArray);$i++)
{
for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
{
?>
catIdxPHP = '<?php echo $i ?>' -1;
gameIdxPHP = '<?php echo $j ?>' -1;
if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
{
gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
$("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
}
<?php
}
}
?>
}
});
HTML
<div style="display:none">
<div id="data">
<div id="graphic">
</div>
</div>
</div>
Sample code of the link
<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >
You have display:none on the parent of your fancybox therefor the grafic isnt displayed.
The Grafic element isn't inside the dom yet if you use display:none initially. Try to use clip: rect instead as a class and add/remove that class using the fancybox callbacks.
Try this code:
$('.jogos').fancybox({
'onStart': function() {
$("#data").removeClass('hidden');
},
'onClosed': function() {
$("#data").addClass('hidden');
}
});
CSS:
.hidden {
clip: rect(1px 1px 1px 1px);
position: absolute;
)}
HTML:
<div>
<div id="data" class="hidden">
<div id="graphic">
</div>
</div>
</div>
I wonder whether someone may be able to help me please.
The code below allows users to delete images from a gallery.
Full Script Minus Styling
<?php session_start();
$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
//echo $_SESSION['userid'];
//echo $_SESSION['locationid'];
?>
<?php
$galleryPath = 'UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.3">
<title>Galleria Twelve Theme</title>
<style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script src="galleria/galleria-1.2.7.min.js"></script>
<script src="galleria/themes/twelve/galleria.twelve.min.js"></script>
<script src="galleria/plugins/history/galleria.history.min.js"></script>
<link rel="stylesheet" href="galleria/themes/twelve/galleria.twelve.css">
<style>
.galleria-thumbnails .btn-delete {
display: block; /* Or just use a div instead of a span*/
position: absolute; bottom : 0px; /*align at the bottom*/
width: 80px;
height: 17px;
cursor: pointer;
background: url(trash8.gif) no-repeat bottom; }
</style>
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
// you do not need to find img and then src... just use id of image
var img = $(this).closest(".galleria-image").find("img");
var userid=$(".hiddenvals").attr('userid');
var locationid=$(".hiddenvals").attr('locationid');
// send the AJAX request
$.ajax({
url : 'delete3.php?userid='+userid+'&locationid='+locationid,
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
</head>
<body>
<ul id="navigation">
<li class="left">
<div align="center">← Add Images</div>
</li>
</ul>
<form id="viewimages" name="viewimages" class="page" action="index.php" method="post"> <input name="userid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['userid']; ?>"> <input name="locationid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['locationid']; ?>"></form>
<div class="content">
<h1>Galleria Twelve Theme</h1>
<p>Demonstrating a simple example.</p>
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
<div id="galleria">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
?>
<img data-title="<b>Image Name: </b> <?php echo $name; ?>" data-description="<b>Description:</b> <?php echo $description; ?>" src="<?php echo $source; ?>">
<?php endfor; ?>
</body>
</html>
In essence, the user clicks on a delete icon, then the 'delete.php' script called in the code above deletes the image from the server. This all works well.
What I'm struggling with is how to pass two variable values to the 'delete.php' script. These are 'userid' and 'locationid'.
I've tried adding the following to the beginning of my 'delete.php':
<?php session_start();
$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
But the values are not carried over. I suspect that this may be down to the fact the the forms 'POST' action is being used to navigate to another HTML page, although I'm no expert, so I may have got this wrong.
I've done quite a bit of reading and searched for tutorials on how to go about getting around this problem, but I've not found anything that seems to suggest a solution.
I just wondered whether someone may be able to look at this please, and offers some guidance on how I can pass these two values to my 'delete.php' script.
Many thanks and kind regards
If they are in the html page add them to the ajax request:
{ image : img.attr('src'), userid: "VALUE", locationid: "VALUE"},
Try to send ids from your html page like
$.ajax({
url : 'delete.php?userid=2&locationid=4',
........
Then in php
$uid=$_POST['userid'];
$locid=$_POST['locationid'];
If you want to get userid and locationid dynamically for each image.
FIRST; in you btn-delete class add uid and locid attribute. I suppose you are looping through PHP.
LIKE ===>
<input type="button" class="btn-delete" uid="2" locid="5">
Then in your script
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
// you do not need to find img and then src... just use id of image
var img = $(this).closest(".galleria-image").find("img");
var uid=$(this).attr('uid');
var locid=$(this).attr('locid');
// send the AJAX request
$.ajax({
url : 'delete.php?userid='+uid+'&locationid='+locid,
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
var id=$(this).attr('id');
var userid=$('#userid').val();
var locationid=$('#locationid').val();
$.ajax({
url : 'delete.php',
type : 'post',
dataType : 'json',
data : { image : img.attr('src'), userid: userid, locationid: locationid},
,
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
add dataType : 'json' and get posted value in delete.php by
$userid=$_POST['userid'];
$locationid=$_POST['locationid'];